কাস্টম Hooks টাইপিং

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 কম্পোনেন্টে টাইপের সঠিক ব্যবহার নিশ্চিত করা সম্ভব, যা কোডিংয়ের সময় ত্রুটি কমাতে এবং উন্নত ডিবাগিংয়ের সুযোগ দেয়।