প্রতিদিনের কোডের জন্য TypeScript জেনেরিকস

আপনি একটি ফাংশন লিখছেন যা একটি অ্যারের প্রথম উপাদান ফেরত দেয়। আপনি চান এটি সংখ্যা, স্ট্রিং এবং অবজেক্টের জন্য কাজ করুক, কিন্তু আপনি চান রিটার্ন টাইপ ইনপুট টাইপের সাথে মিলে যাক। জেনেরিকস ছাড়া, আপনাকে any ব্যবহার করতে হতো এবং সমস্ত টাইপ সুরক্ষা হারাতে হতো। এখানেই TypeScript জেনেরিকস কাজে আসে।

জেনেরিকস আপনাকে এমন কোড লিখতে দেয় যা একাধিক টাইপের সাথে কাজ করে এবং নির্দিষ্ট টাইপ তথ্য সংরক্ষণ করে। এই গাইডে, আমরা প্রতিদিনের TypeScript কোডে জেনেরিকস ব্যবহারের ব্যবহারিক প্যাটার্নগুলি অন্বেষণ করব।

জেনেরিকস কী?

জেনেরিকস হল টাইপ প্যারামিটারাইজ করার একটি উপায়। যেমন ফাংশন প্যারামিটার নেয়, তেমনি জেনেরিকস টাইপ প্যারামিটার নেয়। এগুলি আপনাকে পুনরায় ব্যবহারযোগ্য কম্পোনেন্ট তৈরি করতে দেয় যা একটি একক টাইপের পরিবর্তে বিভিন্ন টাইপের উপর কাজ করে।

এই আইডেন্টিটি ফাংশনটি বিবেচনা করুন:

function identity<T>(arg: T): T {
  return arg;
}

এখানে, T একটি টাইপ ভেরিয়েবল। যখন আপনি identity(42) কল করেন, TypeScript T কে number হিসেবে অনুমান করে। যখন আপনি identity("hello") কল করেন, T হয়ে যায় string। রিটার্ন টাইপ সর্বদা ইনপুট টাইপের সাথে মেলে।

ব্যবহারিক জেনেরিক ফাংশন

একটি সাধারণ পরিস্থিতি দেখি: একটি ফাংশন যা একটি মানকে অবজেক্টে মোড়ায়।

function wrapInObject<T>(value: T): { value: T } {
  return { value };
}

জেনেরিকস ছাড়া, আপনাকে any বা unknown ব্যবহার করতে হতো, এবং কলাররা টাইপ তথ্য হারাতো। জেনেরিকসের সাথে, রিটার্ন টাইপ সঠিকভাবে { value: T }।

আরেকটি প্রতিদিনের উদাহরণ হল একটি ফাংশন যা একটি অ্যারের শেষ উপাদান ফেরত দেয়:

function last<T>(arr: T[]): T | undefined {
  return arr[arr.length - 1];
}

TypeScript অ্যারে আর্গুমেন্ট থেকে T অনুমান করে, তাই last([1, 2, 3]) ফেরত দেয় number | undefined।

জেনেরিক কনস্ট্রেইন্ট

কখনও কখনও আপনি আপনার জেনেরিকের সাথে ব্যবহারযোগ্য টাইপগুলি সীমাবদ্ধ করতে চান। উদাহরণস্বরূপ, আপনার এমন একটি প্রপার্টি অ্যাক্সেস করতে হতে পারে যা শুধুমাত্র নির্দিষ্ট টাইপে বিদ্যমান। আপনি একটি কনস্ট্রেইন্ট যোগ করতে extends কীওয়ার্ড ব্যবহার করতে পারেন।

function getLength<T extends { length: number }>(item: T): number {
  return item.length;
}

এখন T অবশ্যই number টাইপের একটি length প্রপার্টি থাকতে হবে। এটি স্ট্রিং, অ্যারে এবং length প্রপার্টি সহ যেকোনো অবজেক্টের জন্য কাজ করে।

আপনি ইন্টারফেসের সাথে কনস্ট্রেইন্টও ব্যবহার করতে পারেন:

interface HasId {
  id: string;
}

function findById<T extends HasId>(items: T[], id: string): T | undefined {
  return items.find(item => item.id === id);
}

এটি নিশ্চিত করে যে findById-এ পাঠানো আইটেমগুলির একটি id প্রপার্টি আছে।

জেনেরিক ইন্টারফেস এবং টাইপ অ্যালিয়াস

জেনেরিকস শুধুমাত্র ফাংশনে সীমাবদ্ধ নয়। আপনি নমনীয় ডেটা স্ট্রাকচার তৈরি করতে জেনেরিক ইন্টারফেস এবং টাইপ অ্যালিয়াস সংজ্ঞায়িত করতে পারেন।

interface ApiResponse<T> {
  data: T;
  status: number;
  error?: string;
}

async function fetchData<T>(url: string): Promise<ApiResponse<T>> {
  const response = await fetch(url);
  const data = await response.json();
  return { data, status: response.status };
}

এখন আপনি API প্রতিক্রিয়াগুলি সঠিকভাবে টাইপ করতে পারেন:

interface User {
  id: number;
  name: string;
}

const userResponse = await fetchData<User>('/api/user');
// userResponse.data is User

জেনেরিক ক্লাস

ক্লাসগুলিও জেনেরিক হতে পারে। একটি সাধারণ উদাহরণ হল একটি স্ট্যাক:

class Stack<T> {
  private items: T[] = [];

  push(item: T): void {
    this.items.push(item);
  }

  pop(): T | undefined {
    return this.items.pop();
  }

  peek(): T | undefined {
    return this.items[this.items.length - 1];
  }
}

const numberStack = new Stack<number>();
numberStack.push(1);
const num = numberStack.pop(); // number | undefined

React কম্পোনেন্টে জেনেরিকস

আপনি যদি React কম্পোনেন্ট তৈরি করেন, জেনেরিকস আপনার কম্পোনেন্টগুলিকে আরও পুনরায় ব্যবহারযোগ্য করতে পারে। উদাহরণস্বরূপ, একটি লিস্ট কম্পোনেন্ট যা যেকোনো টাইপের আইটেম রেন্ডার করে:

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return <ul>{items.map((item, index) => <li key={index}>{renderItem(item)}</li>)}</ul>;
}

এখন আপনি List যেকোনো টাইপের সাথে ব্যবহার করতে পারেন এবং renderItem কলব্যাকের উপর সম্পূর্ণ টাইপ চেকিং পাবেন।

সাধারণ ভুল এবং সেরা অনুশীলন

• জেনেরিকস অতিরিক্ত ব্যবহার করবেন না। যদি একটি ফাংশন শুধুমাত্র একটি নির্দিষ্ট টাইপের সাথে কাজ করে, শুধু সেই টাইপ ব্যবহার করুন। জেনেরিকস জটিলতা যোগ করে।
• বর্ণনামূলক টাইপ প্যারামিটার নাম ব্যবহার করুন। T সাধারণ হলেও, একাধিক প্যারামিটারের জন্য TInput, TOutput এর মতো নাম ব্যবহার করুন।
• any এর চেয়ে কনস্ট্রেইন্ট পছন্দ করুন। কনস্ট্রেইন্ট আপনাকে টাইপ সুরক্ষা দেয় এবং নমনীয়ও রাখে।
• মনে রাখবেন জেনেরিকস রানটাইমে মুছে ফেলা হয়। এগুলি শুধুমাত্র কম্পাইল টাইমে বিদ্যমান।

তুলনা: জেনেরিকস বনাম any বনাম ইউনিয়ন টাইপ

সাধারণ জিজ্ঞাসা

any এর পরিবর্তে জেনেরিকস কখন ব্যবহার করব?

যখনই আপনি একটি ফাংশন বা কম্পোনেন্ট জুড়ে টাইপ তথ্য সংরক্ষণ করতে চান, জেনেরিকস ব্যবহার করুন। any টাইপ চেকিং নিষ্ক্রিয় করে, জেনেরিকস তা রাখে। যদি আপনি কিছু কাজ করানোর জন্য any ব্যবহার করতে যান, তবে ভাবুন জেনেরিকস কি আরও নিরাপদে সমাধান করতে পারে।

আমি কি একাধিক টাইপ প্যারামিটার ব্যবহার করতে পারি?

হ্যাঁ। আপনি একাধিক টাইপ প্যারামিটার সহ ফাংশন সংজ্ঞায়িত করতে পারেন, যেমন function pair<K, V>(key: K, value: V): [K, V]। একাধিক থাকলে বর্ণনামূলক নাম ব্যবহার করুন।

.tsx ফাইলে অ্যারো ফাংশনের সাথে জেনেরিকস কীভাবে কাজ করে?

.tsx ফাইলে, <T> JSX এর সাথে অস্পষ্ট হতে পারে। ট্রেইলিং কমা ব্যবহার করুন: const identity = <T,>(arg: T): T => arg; অথবা extends unknown ব্যবহার করুন: <T extends unknown>।

জেনেরিকস একটি শক্তিশালী বৈশিষ্ট্য যা আপনার TypeScript কোডকে আরও পুনরায় ব্যবহারযোগ্য এবং টাইপ-সুরক্ষিত করতে পারে। সাধারণ জেনেরিক ফাংশন দিয়ে শুরু করুন, তারপর ধীরে ধীরে ইন্টারফেস এবং ক্লাসে প্রয়োগ করুন। যদি আপনার টাইপ সুরক্ষার সাথে JSON ডেটা ফরম্যাট বা যাচাই করতে হয়, আমাদের JSON ফরম্যাটার টুল দেখুন যা দ্রুত আপনার JSON পরিদর্শন এবং প্রিটি-প্রিন্ট করতে পারে।