Props এবং State টাইপিং

TypeScript ব্যবহার করে React অ্যাপ্লিকেশন তৈরি করার সময়, আপনি Props এবং State এর টাইপিং করতে পারেন, যা কোডের নিরাপত্তা এবং ম্যানটেইনিবিলিটি নিশ্চিত করে। TypeScript এর সাহায্যে আপনি প্রতিটি prop এবং state এর টাইপ নির্ধারণ করে নিশ্চিত করতে পারেন যে সঠিক ডেটা টাইপ ব্যবহৃত হচ্ছে।

এখানে আমরা Props এবং State টাইপিংয়ের কিছু উদাহরণ দেখব।

১. Props টাইপিং

React এ Props হলো উপাদান (Component) এর ইনপুট যা প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে পাঠানো হয়। TypeScript এর সাহায্যে Props এর টাইপ ঠিকমতো নির্ধারণ করা খুবই সহজ। আপনি ইন্টারফেস (Interface) বা টাইপ (Type) ব্যবহার করে Props এর টাইপ নির্ধারণ করতে পারেন।

Props টাইপিং - ইন্টারফেস ব্যবহার:

import React from "react";

interface GreetingProps {
  name: string;
  age: number;
}

const Greeting: React.FC<GreetingProps> = ({ name, age }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
};

export default Greeting;

এখানে, GreetingProps ইন্টারফেসের মাধ্যমে name এবং age প্রপার্টির টাইপ নির্ধারণ করা হয়েছে। Greeting কম্পোনেন্টে React.FC<GreetingProps> ব্যবহার করা হয়েছে, যার মাধ্যমে Props এর টাইপ নিশ্চিত করা হয়েছে।

Props টাইপিং - টাইপ ব্যবহার:

import React from "react";

type GreetingProps = {
  name: string;
  age: number;
};

const Greeting: React.FC<GreetingProps> = ({ name, age }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
};

export default Greeting;

এখানে, GreetingProps টাইপ ব্যবহার করা হয়েছে, যা Props এর টাইপ নির্ধারণ করে।

২. State টাইপিং

React এর State হলো একটি কম্পোনেন্টের মধ্যে ডেটা যা ইউজার ইন্টারঅ্যাকশন বা অন্যান্য কার্যকলাপের মাধ্যমে পরিবর্তিত হতে পারে। TypeScript ব্যবহার করে State এর টাইপ নির্ধারণ করা, বিশেষ করে যখন State এর ভ্যালু বিভিন্ন টাইপ হতে পারে, তখন গুরুত্বপূর্ণ হয়ে পড়ে।

State টাইপিং - ক্লাস কম্পোনেন্টে:

React ক্লাস কম্পোনেন্টে State টাইপিং করতে, State টাইপ বা ইন্টারফেস ব্যবহার করা হয়।

import React, { Component } from "react";

interface CounterState {
  count: number;
}

class Counter extends Component<{}, CounterState> {
  state: CounterState = {
    count: 0
  };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

এখানে, CounterState ইন্টারফেস ব্যবহার করা হয়েছে, যার মাধ্যমে count এর টাইপ number হিসেবে নির্ধারণ করা হয়েছে।

State টাইপিং - ফাংশনাল কম্পোনেন্টে (React Hooks):

React এর Hooks ব্যবহারে State টাইপিং করা সহজ। useState হুকের মাধ্যমে আপনি টাইপ নির্ধারণ করতে পারেন।

import React, { useState } from "react";

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

এখানে useState<number>(0) দিয়ে count স্টেটের টাইপ number নির্ধারণ করা হয়েছে।

৩. Props এবং State এর সমন্বয়

একই কম্পোনেন্টে যদি Props এবং State ব্যবহৃত হয়, তবে তাদের টাইপিংকে একসাথে সংজ্ঞায়িত করা যায়।

উদাহরণ:

import React, { useState } from "react";

interface CounterProps {
  initialCount: number;
}

const Counter: React.FC<CounterProps> = ({ initialCount }) => {
  const [count, setCount] = useState<number>(initialCount);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

এখানে CounterProps ইন্টারফেসের মাধ্যমে initialCount এর টাইপ number নির্ধারণ করা হয়েছে এবং useState<number>(initialCount) এর মাধ্যমে count স্টেটের টাইপও নির্ধারণ করা হয়েছে।

৪. জটিল স্টেট টাইপিং

ধরা যাক, আপনি একটি কমপ্লেক্স অবজেক্ট বা অ্যারে স্টেট টাইপ করতে চান। TypeScript আপনাকে এমন ধরনের স্টেট টাইপিং এর জন্য ইন্টারফেস বা টাইপ ব্যবহার করতে দেয়।

উদাহরণ:

interface Todo {
  id: number;
  task: string;
  completed: boolean;
}

const TodoList: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([
    { id: 1, task: "Learn TypeScript", completed: false },
    { id: 2, task: "Build a React App", completed: false }
  ]);

  const toggleCompletion = (id: number) => {
    setTodos(
      todos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  return (
    <div>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.task} - {todo.completed ? "Completed" : "Incomplete"}
            <button onClick={() => toggleCompletion(todo.id)}>Toggle</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

এখানে, Todo ইন্টারফেসের মাধ্যমে স্টেট todos এর টাইপ Todo[] নির্ধারণ করা হয়েছে।

সারাংশ

TypeScript এর সাহায্যে React এর Props এবং State টাইপিং করা খুবই সহজ এবং কার্যকর। টাইপ নির্ধারণ করার মাধ্যমে আপনি কোডের টাইপ সেফটি বৃদ্ধি করতে পারেন, ফলে ডেভেলপমেন্টের সময় ভুল হওয়া কমে এবং কোড আরো সহজে রিফ্যাক্টর করা যায়।