TypeScript এবং React Integration

React একটি জনপ্রিয় JavaScript লাইব্রেরি যা ইন্টারফেস এবং ইউজার অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। TypeScript, একটি স্ট্যাটিক টাইপিং ভাষা, React এ ব্যবহৃত কোডের ধরন এবং নিরাপত্তা বৃদ্ধি করতে সহায়তা করে। TypeScript React অ্যাপ্লিকেশন তৈরি করতে টাইপ সেফটি, কোড কমপ্লিশন এবং উন্নত ডেভেলপমেন্ট অভিজ্ঞতা প্রদান করে।

এই টিউটোরিয়ালে আমরা TypeScript এবং React কে একত্রে ব্যবহার করার পদ্ধতি দেখব।

১. TypeScript এবং React এর মধ্যে সেটআপ

React প্রজেক্টে TypeScript ব্যবহার করার জন্য প্রথমে TypeScript ইন্সটল এবং সেটআপ করতে হয়। নিচে React অ্যাপ্লিকেশন তৈরি করার জন্য পুরো প্রক্রিয়া দেওয়া হয়েছে।

১.১. নতুন React + TypeScript প্রজেক্ট তৈরি করা

React প্রজেক্টে TypeScript যুক্ত করতে সবচেয়ে সহজ পদ্ধতি হলো create-react-app ব্যবহার করা।

npx create-react-app my-app --template typescript

এই কমান্ডটি একটি নতুন React প্রজেক্ট তৈরি করবে যা TypeScript টেমপ্লেটের সাথে কনফিগার করা থাকবে। এতে ts এবং tsx ফাইল এক্সটেনশন ব্যবহৃত হবে এবং TypeScript সংক্রান্ত প্রয়োজনীয় ফাইলগুলো (যেমন tsconfig.json) স্বয়ংক্রিয়ভাবে তৈরি হবে।

১.২. প্রতিটি ফাইলের এক্সটেনশন পরিবর্তন করা

আপনি যদি একটি আগের JavaScript প্রজেক্টে TypeScript যুক্ত করতে চান, তাহলে আপনাকে কিছু পরিবর্তন করতে হবে। React কোডের ফাইলগুলোকে .tsx এক্সটেনশনে রূপান্তর করতে হবে, কারণ React কম্পোনেন্টস সাধারণত JSX সিনট্যাক্স ব্যবহার করে।

উদাহরণ:

src/App.js -> src/App.tsx

এছাড়া, TypeScript এর জন্য tsconfig.json ফাইলটি চেক করে প্রয়োজনীয় কনফিগারেশন করা উচিত।

২. React কম্পোনেন্ট তৈরি করা (TypeScript ব্যবহার করে)

React কম্পোনেন্টে TypeScript ব্যবহার করা অনেক সহজ। আপনি props এবং state এর টাইপ নির্ধারণ করতে পারেন, যা আপনার কোডে টাইপ সেফটি নিশ্চিত করবে।

২.১. Functional Component

Functional components-এ TypeScript ব্যবহার করার জন্য, আপনাকে FC (Functional Component) টাইপ অথবা কাস্টম টাইপ ব্যবহার করতে হবে।

উদাহরণ:

import React from 'react';

type AppProps = {
  message: string;
  count: number;
};

const App: React.FC<AppProps> = ({ message, count }) => {
  return (
    <div>
      <h1>{message}</h1>
      <p>Count: {count}</p>
    </div>
  );
};

export default App;

এখানে:

• AppProps টাইপটি message এবং count প্রপার্টি ডিফাইন করছে, যার মান যথাক্রমে string এবং number।
• React.FC<AppProps> টাইপটি App কম্পোনেন্টে এই প্রপার্টিগুলি টাইপ সেফভাবে ইনপুট হিসেবে ব্যবহার করতে সাহায্য করে।

২.২. Class Component

Class-based কম্পোনেন্টের ক্ষেত্রেও TypeScript ব্যবহার করা যায়। তবে, class কম্পোনেন্টে props এবং state টাইপ করার জন্য React.Component এর সাথে টাইপ প্যারামিটার ব্যবহার করতে হয়।

উদাহরণ:

import React from 'react';

type AppProps = {
  message: string;
};

type AppState = {
  count: number;
};

class App extends React.Component<AppProps, AppState> {
  constructor(props: AppProps) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    const { message } = this.props;
    const { count } = this.state;

    return (
      <div>
        <h1>{message}</h1>
        <p>Count: {count}</p>
        <button onClick={() => this.setState({ count: count + 1 })}>Increment</button>
      </div>
    );
  }
}

export default App;

এখানে:

• AppProps এবং AppState টাইপগুলি props এবং state এর ডেটা টাইপ চিহ্নিত করছে।
• React.Component<AppProps, AppState> টাইপটি ক্লাস কম্পোনেন্টের জন্য props এবং state টাইপকে ডিফাইন করছে।

৩. React Hooks এবং TypeScript

React Hooks যেমন useState, useEffect, useReducer ইত্যাদির সাথে TypeScript ব্যবহার করা অত্যন্ত শক্তিশালী হতে পারে, কারণ এটি টাইপ সেফটি এবং অটোকমপ্লিট ফিচারগুলো এনাবল করে।

৩.১. useState Hook

useState hook এর সাথে TypeScript ব্যবহার করতে, আপনি স্টেটের টাইপ স্পষ্টভাবে ডিফাইন করতে পারেন।

উদাহরণ:

import React, { useState } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);  // count এর টাইপ number

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

এখানে:

• useState<number>(0) দ্বারা count এর জন্য টাইপ number স্পষ্টভাবে ডিফাইন করা হয়েছে।

৩.২. useEffect Hook

useEffect hook এর সাথে টাইপ ব্যবহার করে আপনি এফেক্টের টাইপ নির্ধারণ করতে পারেন।

উদাহরণ:

import React, { useEffect, useState } from 'react';

const Timer: React.FC = () => {
  const [time, setTime] = useState<number>(0);

  useEffect(() => {
    const interval = setInterval(() => setTime((prev) => prev + 1), 1000);

    return () => clearInterval(interval);
  }, []);  // Empty dependency array to run only once

  return <div>Time: {time}s</div>;
};

export default Timer;

এখানে:

• useState<number>(0) এবং useEffect কে টাইপ সেফভাবে ব্যবহার করা হয়েছে।

৪. React এবং TypeScript এর সুবিধা

TypeScript এবং React একত্রে ব্যবহারের ফলে বেশ কিছু গুরুত্বপূর্ণ সুবিধা পাওয়া যায়:

• টাইপ সেফটি: কোডের মধ্যে টাইপ ইস্যু রিডাক্ট করতে TypeScript ডেভেলপারদের সাহায্য করে, যেমন props এবং state এর টাইপের সঠিকতা নিশ্চিত করা।
• কোড কমপ্লিশন: TypeScript এর কারণে কোড কমপ্লিশন এবং অটো সাজার (auto-suggestions) সুবিধা পাওয়া যায়।
• রিফ্যাক্টরিং এবং মেইন্টেনেন্স: টাইপ সিস্টেমের কারণে কোড সহজে রিফ্যাক্টর এবং মেইন্টেইন করা যায়।
• ডকুমেন্টেশন: টাইপগুলি স্বয়ংক্রিয়ভাবে ডকুমেন্টেশন হিসেবে কাজ করে।

TypeScript এবং React এর সমন্বয়ে উন্নত, টাইপ-নিরাপদ এবং স্কেলযোগ্য অ্যাপ্লিকেশন তৈরি করা সম্ভব। TypeScript এর শক্তিশালী টাইপ সিস্টেম React কোডের মান উন্নত করে এবং বড় প্রজেক্টে কাজ করার জন্য অত্যন্ত সুবিধাজনক হয়।

React প্রজেক্টে TypeScript ব্যবহার করা কোডের টাইপ সেফটি, ডেভেলপমেন্ট স্পিড, এবং স্কেলেবিলিটি বৃদ্ধি করতে সাহায্য করে। TypeScript আপনাকে কোডে টাইপের ত্রুটি দ্রুত শনাক্ত করতে সাহায্য করে, যা JavaScript-এ সম্ভব নয়। React-এর সাথে TypeScript ব্যবহারে উন্নত কোড সম্পাদনা, অটো কমপ্লিশন, এবং টাইপ চেকিংয়ের সুবিধা পাওয়া যায়।

১. React প্রজেক্টে TypeScript ইন্টিগ্রেশন

React প্রজেক্টে TypeScript ব্যবহারের জন্য দুটি প্রধান পদ্ধতি রয়েছে:

• নতুন React + TypeScript প্রজেক্ট তৈরি করা
• পূর্ববর্তী React প্রজেক্টে TypeScript যোগ করা

২. নতুন React + TypeScript প্রজেক্ট তৈরি করা

React প্রজেক্টে TypeScript ব্যবহার করতে চাইলে, Create React App (CRA) টুল ব্যবহার করে TypeScript সহ একটি নতুন প্রজেক্ট তৈরি করা সবচেয়ে সহজ পদ্ধতি। --template typescript অপশন ব্যবহার করলে TypeScript সহ একটি React প্রজেক্ট তৈরি হবে।

স্টেপ ১: Create React App ব্যবহার করে নতুন React প্রজেক্ট তৈরি করা

npx create-react-app my-app --template typescript

এটি একটি নতুন React প্রজেক্ট তৈরি করবে এবং প্রজেক্টে TypeScript কনফিগারেশন সেটআপ করবে। এর ফলে আপনি .tsx এবং .ts ফাইল ব্যবহার করতে পারবেন।

স্টেপ ২: প্রজেক্ট ফোল্ডারে প্রবেশ করা

cd my-app

এখন আপনি React প্রজেক্টে TypeScript ব্যবহার শুরু করতে পারবেন। প্রজেক্টের মূল ফাইলগুলো যেমন App.tsx, index.tsx ইত্যাদি দেখতে পাবেন।

৩. পূর্ববর্তী React প্রজেক্টে TypeScript যোগ করা

যদি আপনার একটি পুরোনো React প্রজেক্ট থাকে এবং আপনি সেখানে TypeScript যোগ করতে চান, তবে কিছু স্টেপ অনুসরণ করে TypeScript ইন্টিগ্রেট করতে পারবেন।

স্টেপ ১: TypeScript এবং টাইপ ডিফিনিশন প্যাকেজ ইনস্টল করা

প্রথমে, TypeScript এবং React-এর জন্য টাইপ ডিফিনিশন প্যাকেজগুলি ইনস্টল করতে হবে।

npm install typescript @types/react @types/react-dom

স্টেপ ২: TypeScript কনফিগারেশন ফাইল তৈরি করা

tsconfig.json ফাইলটি TypeScript কনফিগারেশনের জন্য ব্যবহৃত হয়। নিচের কমান্ড দিয়ে tsconfig.json ফাইলটি তৈরি করুন:

npx tsc --init

এটি আপনার প্রজেক্টের রুট ডিরেক্টরিতে tsconfig.json ফাইল তৈরি করবে। এই ফাইলটি TypeScript কম্পাইলার কীভাবে কাজ করবে তা কনফিগার করে।

স্টেপ ৩: .jsx ফাইলগুলিকে .tsx ফাইলে পরিবর্তন করা

React কম্পোনেন্টের সমস্ত .jsx ফাইলকে .tsx ফাইলে রিনেম করুন, কারণ TypeScript React কম্পোনেন্টের জন্য .tsx এক্সটেনশন ব্যবহার করে। যদি আপনি শুধুমাত্র সাধারণ TypeScript কোড লিখতে চান, তবে .ts এক্সটেনশন ব্যবহার করুন।

স্টেপ ৪: টাইপ সংজ্ঞা যোগ করা

React কম্পোনেন্টে টাইপ যোগ করতে হবে। উদাহরণস্বরূপ, props এবং state এর জন্য টাইপ ডিফাইন করতে হবে।

import React from 'react';

// Props টাইপ ডিফাইন করা
type AppProps = {
  name: string;
  age: number;
};

// React Functional Component এ টাইপ ব্যবহার
const App: React.FC<AppProps> = ({ name, age }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
}

export default App;

এখানে AppProps টাইপটি name এবং age প্রপার্টি ধারণ করে এবং React.FC (React Functional Component) ব্যবহৃত হয়েছে যাতে TypeScript কম্পাইলার জানে এটি একটি ফাংশনাল কম্পোনেন্ট।

৪. React এবং TypeScript এর মধ্যে ইন্টিগ্রেশন সুবিধা

• টাইপ সেফটি: TypeScript দিয়ে আপনি কম্পাইল টাইমে টাইপ সংক্রান্ত ত্রুটি ধরতে পারবেন, যা আপনাকে রানটাইম এ ত্রুটি কমাতে সাহায্য করে।
• অটো কমপ্লিশন: TypeScript ইনটেলিজেন্স আপনাকে কোড লেখার সময় অটো কমপ্লিশন ফিচার দেয়, যার মাধ্যমে আপনি দ্রুত এবং সঠিকভাবে কোড লিখতে পারেন।
• পুনরায় ব্যবহারযোগ্য কম্পোনেন্ট: TypeScript এর সাথে React ব্যবহার করলে কম্পোনেন্টগুলোর টাইপগুলো স্পষ্টভাবে ডিফাইন করা যায়, যার ফলে আপনার কোড আরও রি-ইউজেবল (পুনঃব্যবহারযোগ্য) হবে।
• ক্লিন কোড: টাইপ ডেফিনিশন কোডকে আরও ক্লিন এবং সহজে বুঝতে সাহায্য করে।

৫. TypeScript React কোড উদাহরণ

TypeScript ব্যবহার করে React কোডে টাইপিং করতে, নিচের মতো কোড লিখতে পারেন:

Functional Component Example with Props:

import React from 'react';

// Props টাইপ ডিফাইন করা
type ButtonProps = {
  label: string;
  onClick: () => void;
};

// Button কম্পোনেন্ট
const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

export default Button;

Class Component Example with State and Props:

import React, { Component } from 'react';

// Props এবং State টাইপ ডিফাইন করা
type CounterProps = {
  initialCount: number;
};

type CounterState = {
  count: number;
};

// Class Component
class Counter extends Component<CounterProps, CounterState> {
  constructor(props: CounterProps) {
    super(props);
    this.state = { count: props.initialCount };
  }

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

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

export default Counter;

এখানে CounterProps এবং CounterState টাইপগুলির মাধ্যমে ক্লাস কম্পোনেন্টের props এবং state টাইপগুলি ডিফাইন করা হয়েছে।

৬. React + TypeScript এ বেস্ট প্র্যাকটিস

• Props টাইপ সঠিকভাবে ডিফাইন করুন: কম্পোনেন্টের props এর জন্য টাইপ প্রপার্লি ডিফাইন করুন, যাতে কোডটি টাইপ সেফ হয়।
• State টাইপিং: React-এর state এর টাইপও স্পষ্টভাবে ডিফাইন করুন, বিশেষত যদি আপনি ক্লাস কম্পোনেন্ট ব্যবহার করেন।
• Event টাইপিং: React ইভেন্টগুলির জন্য টাইপ সঠিকভাবে ব্যবহার করুন, যেমন onClick, onChange ইত্যাদি।

TypeScript React প্রজেক্টের মাধ্যমে আপনি কম্পাইল টাইমে টাইপ সেফটি নিশ্চিত করতে পারেন, যা কোডের ত্রুটি কমাবে এবং উন্নত ডেভেলপমেন্ট অভিজ্ঞতা প্রদান করবে।

TypeScript-এ ফাংশনাল কম্পোনেন্ট এবং ক্লাস কম্পোনেন্ট দুটি গুরুত্বপূর্ণ ধারণা। React বা অন্যান্য UI লাইব্রেরিতে TypeScript ব্যবহার করার সময় এই দুই ধরনের কম্পোনেন্ট ব্যবহার করা হয়ে থাকে। TypeScript আপনাকে টাইপ সেফটি (type safety), বাগ কমানো, এবং কোডের স্পষ্টতা নিশ্চিত করতে সাহায্য করে, যা আপনার অ্যাপ্লিকেশন তৈরি এবং পরিচালনা করতে আরও সহজ করে তোলে।

React-এ ফাংশনাল কম্পোনেন্ট এবং ক্লাস কম্পোনেন্ট উভয়ের জন্য TypeScript ব্যবহার করা যায়, তবে TypeScript-এ প্রতিটি কম্পোনেন্টের জন্য টাইপ ডেফিনিশন আলাদা হয়। নিচে ফাংশনাল এবং ক্লাস কম্পোনেন্টে TypeScript ব্যবহার করার বিস্তারিত আলোচনা করা হয়েছে।

ফাংশনাল কম্পোনেন্টে TypeScript

React-এর ফাংশনাল কম্পোনেন্ট হলো একটি সাধারণ ফাংশন যা প্রপস (props) গ্রহণ করে এবং JSX (JavaScript XML) ফেরত দেয়। TypeScript-এ ফাংশনাল কম্পোনেন্টে প্রপসের টাইপ ঠিকভাবে ডিফাইন করা খুবই গুরুত্বপূর্ণ। এর জন্য আপনি FC (Functional Component) টাইপ বা নিজস্ব টাইপ ব্যবহার করতে পারেন।

ফাংশনাল কম্পোনেন্টে টাইপ ডেফিনিশন

React ফাংশনাল কম্পোনেন্টে টাইপ ডেফিনিশনের জন্য React.FC (Functional Component) ব্যবহার করা যেতে পারে। এটি React এর প্রপসের টাইপ নির্ধারণ করে এবং একটি কম্পোনেন্ট ফাংশনকে টাইপ সেফটি সহ তৈরি করতে সাহায্য করে।

import React from 'react';

// টাইপ ডেফিনিশন
interface GreetingProps {
  name: string;
  age?: number; // ? অর্থাৎ এই প্রপার্টি ঐচ্ছিক
}

// ফাংশনাল কম্পোনেন্টে TypeScript ব্যবহার
const Greeting: React.FC<GreetingProps> = ({ name, age }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      {age && <p>Your age is: {age}</p>}
    </div>
  );
};

export default Greeting;

এখানে GreetingProps ইন্টারফেসটি name এবং ঐচ্ছিক age প্রপার্টি ডিফাইন করছে। React.FC টাইপ ব্যবহার করে আমরা Greeting ফাংশনাল কম্পোনেন্ট তৈরি করেছি। এটি name এবং age প্রপস গ্রহণ করবে এবং টাইপ সেফভাবে কাজ করবে।

টাইপ ডেফিনিশন ছাড়া ফাংশনাল কম্পোনেন্ট

TypeScript-এ আপনি React.FC টাইপ না ব্যবহার করেও টাইপ ডেফিনিশন করতে পারেন, তবে এটি সাধারনত সুপারিশ করা হয় না। TypeScript-এ টাইপ নিশ্চিত করতে React.FC ভালো একটি অপশন।

import React from 'react';

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

// টাইপ ছাড়া ফাংশনাল কম্পোনেন্ট
const Greeting = ({ name, age }: GreetingProps) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      {age && <p>Your age is: {age}</p>}
    </div>
  );
};

export default Greeting;

এখানে আমরা GreetingProps ইন্টারফেস ব্যবহার করে টাইপিং করেছি, কিন্তু React.FC ব্যবহার করা হয়নি।

ক্লাস কম্পোনেন্টে TypeScript

React ক্লাস কম্পোনেন্ট-এ আমরা সাধারণত ক্লাস ব্যবহার করি যেটি React.Component থেকে ইনহেরিট করে। TypeScript-এ ক্লাস কম্পোনেন্টে টাইপিং করার জন্য Props এবং State টাইপ ডেফিনিশন করতে হয়। TypeScript-এ ক্লাস কম্পোনেন্টে প্রপস এবং স্টেটের টাইপ সঠিকভাবে সংজ্ঞায়িত করা খুবই গুরুত্বপূর্ণ।

ক্লাস কম্পোনেন্টে টাইপ ডেফিনিশন

import React, { Component } from 'react';

// টাইপ ডেফিনিশন
interface WelcomeProps {
  name: string;
}

interface WelcomeState {
  counter: number;
}

// ক্লাস কম্পোনেন্টে টাইপিং
class Welcome extends Component<WelcomeProps, WelcomeState> {
  constructor(props: WelcomeProps) {
    super(props);
    this.state = { counter: 0 };
  }

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

  render() {
    const { name } = this.props;
    const { counter } = this.state;

    return (
      <div>
        <h1>Welcome, {name}!</h1>
        <p>Counter: {counter}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Welcome;

এখানে WelcomeProps এবং WelcomeState ইন্টারফেসগুলির মাধ্যমে ক্লাস কম্পোনেন্টের প্রপস এবং স্টেট টাইপ ডিফাইন করা হয়েছে। React.Component<WelcomeProps, WelcomeState> এর মাধ্যমে প্রপস এবং স্টেটের টাইপ জানানো হয়েছে।

টাইপ ডেফিনিশন ছাড়া ক্লাস কম্পোনেন্ট

TypeScript-এ আপনি টাইপ ডেফিনিশন ছাড়া ক্লাস কম্পোনেন্ট ব্যবহার করতে পারেন, তবে এটি ত্রুটি এবং বাগের ঝুঁকি বাড়ায়।

import React, { Component } from 'react';

// টাইপ ডেফিনিশন ছাড়া ক্লাস কম্পোনেন্ট
class Welcome extends Component {
  state = { counter: 0 };

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

  render() {
    const { name } = this.props;
    const { counter } = this.state;

    return (
      <div>
        <h1>Welcome, {name}!</h1>
        <p>Counter: {counter}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Welcome;

এখানে state এবং props টাইপ সঠিকভাবে ডিফাইন করা হয়নি। এটি TypeScript-কে টাইপ ইনফরমেশন দিতে পারে না, যা পরবর্তীতে বড় সমস্যা তৈরি করতে পারে।

ফাংশনাল কম্পোনেন্ট vs ক্লাস কম্পোনেন্টে TypeScript

1. সিম্প্লিসিটি: ফাংশনাল কম্পোনেন্ট সাধারণত ক্লাস কম্পোনেন্টের তুলনায় কম কোড এবং সহজ হয়। TypeScript-এ ফাংশনাল কম্পোনেন্টকে টাইপ করা আরও সহজ এবং কমপ্যাক্ট।
2. স্টেট ও লাইফসাইকেল মেথডস: ক্লাস কম্পোনেন্টে স্টেট এবং লাইফসাইকেল মেথডস থাকে, যেগুলি বড় অ্যাপ্লিকেশন গড়তে সাহায্য করে। তবে ফাংশনাল কম্পোনেন্টেও React Hooks (যেমন useState, useEffect) ব্যবহার করে স্টেট এবং লাইফসাইকেল মেথডস পরিচালনা করা সম্ভব।
3. টাইপিং সুবিধা: TypeScript-এ ফাংশনাল কম্পোনেন্টের টাইপিং সাধারণত সহজ এবং সোজা। ক্লাস কম্পোনেন্টে টাইপিং আরও জটিল হতে পারে, বিশেষত যখন স্টেট এবং প্রপস টাইপ ডেফিনিশন করতে হয়।

TypeScript-এ React কম্পোনেন্ট লেখার সময় টাইপ সেফটি নিশ্চিত করা গুরুত্বপূর্ণ, এবং এর মাধ্যমে আপনি বড় এবং জটিল অ্যাপ্লিকেশন তৈরি করতে পারবেন।

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 টাইপিং করা খুবই সহজ এবং কার্যকর। টাইপ নির্ধারণ করার মাধ্যমে আপনি কোডের টাইপ সেফটি বৃদ্ধি করতে পারেন, ফলে ডেভেলপমেন্টের সময় ভুল হওয়া কমে এবং কোড আরো সহজে রিফ্যাক্টর করা যায়।

React-এ কাস্টম Hooks হলো সেই কাস্টম ফাংশন যা React এর স্টেট, ইফেক্ট, বা অন্যান্য React ফিচার ব্যবহার করে নতুন ফাংশনালিটি তৈরি করে। TypeScript এর সাথে কাস্টম Hooks ব্যবহার করা হলে, টাইপ সিস্টেমের সাহায্যে কোডের নিরাপত্তা বাড়ানো এবং টাইপ মিসম্যাচ এড়ানো সম্ভব হয়। এই টিউটোরিয়ালে আমরা কাস্টম Hooks টাইপিং সম্পর্কিত কিছু গুরুত্বপূর্ণ ধারণা এবং উদাহরণ দেখব।

১. কাস্টম Hooks এবং টাইপিংয়ের গুরুত্ব

React Hooks যেমন useState, useEffect, useRef ইত্যাদি অনেক গুরুত্বপূর্ণ ফিচার অফার করে, এবং TypeScript এর সাহায্যে আপনি এই ফিচারগুলোকে আরও শক্তিশালী এবং টাইপ নিরাপদভাবে ব্যবহার করতে পারেন। কাস্টম Hooks টাইপিংয়ের মাধ্যমে আপনি:

• টাইপ নিরাপত্তা নিশ্চিত করতে পারেন।
• কম্পাইল টাইমে ত্রুটি সনাক্ত করতে পারেন।
• React Hooks এর স্টেট এবং প্রোপার্টির টাইপ সঠিকভাবে ডিফাইন করতে পারেন।

২. useState এর কাস্টম টাইপিং

React এর useState Hook ব্যবহার করার সময় টাইপ নির্ধারণ করা খুবই গুরুত্বপূর্ণ। যদি আপনি TypeScript ব্যবহার করেন, তবে আপনাকে useState এর সাথে টাইপ ডিফাইন করতে হবে যাতে স্টেটের ধরন স্পষ্ট হয়।

উদাহরণ:

import { useState } from "react";

function useCounter(initialValue: number) {
  const [count, setCount] = useState<number>(initialValue); // টাইপিং

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return { count, increment, decrement };
}

এখানে useCounter কাস্টম Hook ব্যবহার করে একটি কাউন্টার তৈরি করা হয়েছে। useState<number> দিয়ে কাউন্টার ভ্যালুর টাইপ number হিসেবে নির্ধারণ করা হয়েছে।

৩. useEffect এর কাস্টম টাইপিং

React এর useEffect Hook এর টাইপিং TypeScript-এ কিছুটা tricky হতে পারে, কারণ এটি অনেক ধরনের dependencies এবং callback ফাংশন গ্রহণ করতে পারে। তবে টাইপিং সঠিকভাবে করলে, এটি কোডে আরও নির্ভরযোগ্যতা এবং টাইপ সুরক্ষা আনে।

উদাহরণ:

import { useState, useEffect } from "react";

function useWindowWidth() {
  const [width, setWidth] = useState<number>(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);

    window.addEventListener("resize", handleResize);

    // ক্লিনআপ ফাংশন
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []); // একমাত্র ডিপেনডেন্সি হল [] (মাউন্ট/আনমাউন্ট)

  return width;
}

এখানে useWindowWidth কাস্টম Hook ব্যবহার করা হয়েছে যা ব্রাউজারের উইন্ডো সাইজের উপর ভিত্তি করে স্টেট আপডেট করে। useEffect এর কাস্টম টাইপিং করা হয়েছে, যাতে টাইপ সঠিকভাবে সনাক্ত করা যায় এবং ক্লিনআপ ফাংশন ব্যবহার করা হয়েছে।

৪. কাস্টম Hook এর জেনেরিক টাইপিং

কাস্টম Hooks এর টাইপ জেনেরিক (generic) করা যেতে পারে, যাতে একাধিক টাইপ ব্যবহার করা যায়। TypeScript-এ আপনি টাইপ জেনেরিক ব্যবহার করে Hooks এর পুনঃব্যবহারযোগ্যতা বাড়াতে পারেন।

উদাহরণ:

import { useState } from "react";

function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  const setValue = (value: T) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error("Error setting localStorage item", error);
    }
  };

  return [storedValue, setValue] as const;
}

এখানে useLocalStorage একটি কাস্টম Hook যা জেনেরিক টাইপ গ্রহণ করে। এর ফলে আপনি যেকোনো ধরনের ডেটা (যেমন: string, number, object, ইত্যাদি) এই Hook ব্যবহার করে localStorage-এ সেভ করতে পারেন এবং টাইপ সঠিকভাবে নির্ধারণ হয়।

ব্যবহার:

const [name, setName] = useLocalStorage<string>("name", "John Doe");
const [age, setAge] = useLocalStorage<number>("age", 30);

এখানে, useLocalStorage Hook-টি string এবং number টাইপের ডেটা সঠিকভাবে ধারণ করতে পারছে, যেহেতু এটি একটি জেনেরিক টাইপ ব্যবহার করছে।

৫. ফাংশন টাইপিং কাস্টম Hook-এ

কাস্টম Hooks তৈরি করার সময়, আপনি যদি ফাংশন ব্যবহার করেন, তবে সেগুলোর টাইপ সঠিকভাবে নির্ধারণ করা গুরুত্বপূর্ণ। এটি ব্যবহারকারীদের জন্য কোডটিকে আরও পরিষ্কার এবং কার্যকরী করে তোলে।

উদাহরণ:

import { useState } from "react";

function useForm<T>(initialState: T) {
  const [formState, setFormState] = useState<T>(initialState);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormState((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  return {
    formState,
    handleChange,
  };
}

এখানে, useForm কাস্টম Hook একটি ফর্মের ইনপুট স্টেট ম্যানেজ করে। T টাইপটি জেনেরিকভাবে ব্যবহার করা হয়েছে, যার মাধ্যমে যে কোনো ফর্ম ডেটা টাইপ নেয়া সম্ভব।

ব্যবহার:

type FormData = {
  name: string;
  email: string;
};

const { formState, handleChange } = useForm<FormData>({ name: "", email: "" });

এখানে useForm Hook-এর সাথে FormData টাইপ পাঠানো হয়েছে, যার মাধ্যমে name এবং email ফিল্ডের জন্য টাইপ সঠিকভাবে নির্ধারণ করা হয়েছে।

সারাংশ

TypeScript-এ কাস্টম Hooks টাইপিং ব্যবহার করার মাধ্যমে কোডের নিরাপত্তা এবং রক্ষণাবেক্ষণযোগ্যতা বৃদ্ধি করা যায়। TypeScript এর জেনেরিক টাইপ এবং টাইপ সিস্টেম React-এর ফিচারগুলিকে আরও শক্তিশালী এবং টাইপ সুরক্ষিত করে তোলে। কাস্টম Hooks টাইপিংয়ের মাধ্যমে React কম্পোনেন্টে টাইপের সঠিক ব্যবহার নিশ্চিত করা সম্ভব, যা কোডিংয়ের সময় ত্রুটি কমাতে এবং উন্নত ডিবাগিংয়ের সুযোগ দেয়।