TypeScript: ভাষার সারমর্ম, কঠোর টাইপিং এবং React Native

TypeScript কী?

TypeScript হল Microsoft (2012) এর একটি প্রোগ্রামিং ভাষা যা Anders Hejlsberg (C# এবং Turbo Pascal-এর নির্মাতা) তৈরি করেছেন। TypeScript JavaScript-কে একটি স্ট্যাটিক টাইপ সিস্টেম, ইন্টারফেস, জেনেরিক, এনাম এবং ডেকোরেটর দিয়ে প্রসারিত করে। TS কোড tsc কম্পাইলার বা Babel-এর মাধ্যমে বিশুদ্ধ JavaScript-এ (ট্রান্সপাইলেশন) কম্পাইল হয় — আউটপুট হল স্ট্যান্ডার্ড JS যা যেকোনো পরিবেশে চলে।

TypeScript তৈরির প্রেরণা হল বড় প্রকল্পগুলিতে JavaScript-এর সীমাবদ্ধতা। JS-এর ডায়নামিক টাইপিং এমন ত্রুটির দিকে নিয়ে যায় যা শুধুমাত্র রানটাইমে আবিষ্কৃত হয়: undefined is not a function, Cannot read property of null। TypeScript টাইপ চেকিং কম্পাইলেশন পর্যায়ে স্থানান্তর করে, কোড এক্সিকিউশনের আগেই এই ত্রুটিগুলি প্রতিরোধ করে। প্রকল্প যত বড়, TS-এর সুবিধা তত বেশি: 100,000+ লাইনের কোডবেসে, TS শত শত সম্ভাব্য বাগ প্রতিরোধ করে।

TypeScript-এর একটি মূল বৈশিষ্ট্য হল tsconfig.json-এ ঐচ্ছিক strict: true ফ্ল্যাগ সহ কঠোর টাইপিং। কঠোর মোড সমস্ত চেক সক্ষম করে: strictNullChecks (null/undefined অন্যান্য টাইপের সাথে অসামঞ্জস্যপূর্ণ), noImplicitAny (অন্তর্নিহিত any নিষিদ্ধ করে), strictFunctionTypes (ফাংশন প্যারামিটারের কন্ট্রাভেরিয়েন্স)। ডিফল্টরূপে, সমস্ত নতুন প্রকল্পের জন্য strict: true সুপারিশ করা হয়।

TypeScript বনাম JavaScript

TypeScript শুধুমাত্র ডেভেলপমেন্ট পর্যায়ে JavaScript থেকে আলাদা। কম্পাইলেশনের পরে, টাইপগুলি মুছে ফেলা হয় — রানটাইম কোনো কর্মক্ষমতা ক্ষতি ছাড়াই সাধারণ JS এক্সিকিউট করে। এটি একটি ট্রেড-অফ: ডেভেলপমেন্টের জন্য একটি অতিরিক্ত কম্পাইলেশন ধাপ প্রয়োজন, তবে এটি IDE-তে অটোকমপ্লিশন, প্রতীক পুনঃনামকরণ সহ রিফ্যাক্টরিং এবং কোডে সরাসরি টাইপ ডকুমেন্টেশন প্রদান করে।

TypeScript টাইপ সিস্টেম

TypeScript-এর টাইপ সিস্টেম কাঠামোগত, নামসূচক নয়: দুটি টাইপ সামঞ্জস্যপূর্ণ যদি তাদের কাঠামো মেলে, নাম নির্বিশেষে। এটি Java/C# থেকে ভিন্ন যেখানে সামঞ্জস্য ক্লাস বা ইন্টারফেস নাম দ্বারা নির্ধারিত হয়। কাঠামোগত টাইপিং বিদ্যমান JS কোডের সাথে একীকরণ সহজ করে — প্রতিটি টাইপের জন্য implements ঘোষণা করার প্রয়োজন নেই।

মৌলিক এবং উন্নত টাইপ

TypeScript JS আদিম টাইপের পাশাপাশি সমর্থন করে: any (চেক অক্ষম করে), unknown (নিরাপদ any — ব্যবহারের আগে চেক প্রয়োজন), never (কখনও ফেরত দেয় না), void (ফেরত নেই), tuple (নির্দিষ্ট দৈর্ঘ্যের টিপল), enum (গণনা), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number)।

// TypeScript-এর মৌলিক টাইপ সিস্টেম
// আদিম টাইপ
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Union এবং Literal টাইপ
type Platform = 'ios' | 'android' | 'web';
type Status = 'idle' | 'loading' | 'success' | 'error';

function getSDKVersion(platform: Platform): number {
  switch (platform) {
    case 'ios': return 17;
    case 'android': return 34;
    case 'web': return 2025;
  }
}

// Tuple — নির্দিষ্ট দৈর্ঘ্যের টিপল
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — স্বয়ংক্রিয় বৃদ্ধি সহ গণনা
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — any-এর নিরাপদ বিকল্প
function parseJSON(json: string): unknown {
  return JSON.parse(json);
}

const data = parseJSON('{"name":"TS"}');
if (typeof data === 'object' && data !== null) {
  console.log((data as Record<string, unknown>).name);
}

Platform টাইপ হল স্ট্রিং লিটারেলের একটি ইউনিয়ন, যা মানগুলিকে তিনটি বিকল্পে সীমাবদ্ধ করে। যদি আপনি 'windows' পাস করেন, TypeScript একটি ত্রুটি ছুঁড়বে। Coordinate টিপল ঠিক দুটি সংখ্যার গ্যারান্টি দেয় — স্থানাঙ্ক বা RGB রঙের জন্য দরকারী। AppState এনাম রিভার্স ম্যাপিং সহ একটি অবজেক্টে কম্পাইল হয়। Unknown ব্যবহারের আগে টাইপ চেক করতে বাধ্য করে — any-এর বিপরীতে, unknown ডিফল্টরূপে নিরাপদ।

ইন্টারফেস এবং type-এলিয়াস

ইন্টারফেস এবং type-এলিয়াস TypeScript-এ অবজেক্টের আকার বর্ণনা করে। ইন্টারফেস ডিক্লেয়ারেশন মার্জিং (পুনঃঘোষণা ফিল্ড যোগ করে) এবং এক্সটেনশন (extends) সমর্থন করে। Type-এলিয়াস ইউনিয়ন, ইন্টারসেকশন, টিপল এবং শর্তসাপেক্ষ টাইপ বর্ণনা করতে পারে, কিন্তু ডিক্লেয়ারেশন মার্জিং সমর্থন করে না। নিয়ম: API অবজেক্টের জন্য interface ব্যবহার করুন, বাকি সবকিছুর জন্য type।

// React Native-এর জন্য ইন্টারফেস এবং টাইপ
// ঐচ্ছিক ফিল্ড সহ ইন্টারফেস
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // ঐচ্ছিক ফিল্ড
  readonly createdAt: Date; // শুধু পঠনযোগ্য
}

// ইন্টারফেস এক্সটেনশন (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// API ডেটার জন্য টাইপ
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial সমস্ত ফিল্ডকে ঐচ্ছিক করে
type PartialUser = Partial<User>;

// Pick — নির্দিষ্ট ফিল্ড নির্বাচন করে
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — টাইপযুক্ত কী সহ অভিধান
type UserMap = Record<string, User>;

User ইন্টারফেস ? (ঐচ্ছিক ফিল্ড) এবং readonly (শুধু পঠনযোগ্য) সহ। ApiResponse<T> API প্রতিক্রিয়ার জন্য একটি জেনেরিক ইন্টারফেস। Partial<User> একটি ইউটিলিটি টাইপ যা সমস্ত ফিল্ডকে ঐচ্ছিক করে (সম্পাদনা ফর্মের জন্য দরকারী)। Pick<User, 'id' | 'name'> শুধুমাত্র নির্দিষ্ট ফিল্ড নির্বাচন করে — প্রিভিউ কম্পোনেন্টের জন্য সুবিধাজনক। Record<string, User> ID অনুসারে ব্যবহারকারী অভিধান।

জেনেরিক এবং ইউটিলিটি টাইপ

জেনেরিক হল TypeScript-এর একটি মূল বৈশিষ্ট্য, যা টাইপ নিরাপত্তা না হারিয়ে যেকোনো টাইপের সাথে কাজ করে এমন কম্পোনেন্ট তৈরি করতে দেয়। একটি জেনেরিক ফাংশন কোণ বন্ধনীতে একটি টাইপ প্যারামিটার দিয়ে সংজ্ঞায়িত করা হয়: function identity<T>(arg: T): T। টাইপ T আর্গুমেন্ট থেকে স্বয়ংক্রিয়ভাবে অনুমিত হয় বা স্পষ্টভাবে নির্দিষ্ট করা হয়: identity<string>('hello')।

ইউটিলিটি টাইপ টাইপ রূপান্তরের জন্য বিল্ট-ইন জেনেরিক: Partial<T> (সমস্ত ফিল্ড ঐচ্ছিক), Required<T> (সমস্ত ফিল্ড বাধ্যতামূলক), Readonly<T> (সমস্ত ফিল্ড শুধু পঠনযোগ্য), Pick<T, K> (ফিল্ড নির্বাচন), Omit<T, K> (ফিল্ড বাদ), Record<K, T> (অভিধান), Exclude<T, U> (ইউনিয়ন থেকে বাদ), Extract<T, U> (ইউনিয়ন থেকে নিষ্কাশন), NonNullable<T> (null/undefined বাদ)।

// TypeScript-এ জেনেরিক
// API-এর সাথে কাজ করার জন্য জেনেরিক ফাংশন
async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return response.json() as Promise<T>;
}

// একটি নির্দিষ্ট টাইপের সাথে ব্যবহার
interface Product {
  id: number;
  title: string;
  price: number;
}

const products = await fetchData<Product[]>('/api/products');

// স্টেট ম্যানেজমেন্টের জন্য জেনেরিক ক্লাস
class StateManager<S> {
  private state: S;

  constructor(initial: S) {
    this.state = initial;
  }

  getState(): S {
    return this.state;
  }

  updateState(partial: Partial<S>): void {
    this.state = { ...this.state, ...partial };
  }
}

// Redux Reducer-এর সাথে টাইপযুক্ত কাজ
type Action<T, P> = {
  type: T;
  payload: P;
};

type UserAction =
  | Action<'SET_USER', User>
  | Action<'CLEAR_USER', undefined>
  | Action<'UPDATE_USER', Partial<User>>;

fetchData<T> ফাংশনটি fetch-এর চারপাশে একটি টাইপযুক্ত মোড়ক। প্যারামিটার T প্রতিক্রিয়ার আকার নির্ধারণ করে: fetchData<Product[]> কল করার সময়, TypeScript জানে যে ফিরে আসা অ্যারেতে Product অবজেক্ট রয়েছে। StateManager<S> ক্লাস যেকোনো টাইপের অবস্থা পরিচালনা করে — Partial<S> আংশিক আপডেটের জন্য। Action<T, P> হল Redux অ্যাকশনের জন্য একটি বৈষম্যমূলক ইউনিয়ন যা switch-এ স্বয়ংক্রিয় টাইপ সংকীর্ণ করে।

React Native-এ TypeScript

React Native-এ TypeScript কম্পোনেন্ট props এবং স্টেটের জন্য কঠোর টাইপিং প্রদান করে। React Native CLI .tsx এক্সটেনশন এবং tsconfig.json সহ একটি টেমপ্লেট তৈরি করে। PropTypes (JS) TypeScript ইন্টারফেস দ্বারা প্রতিস্থাপিত হয় — চেকিং রানটাইমে না হয়ে কম্পাইলেশন পর্যায়ে করা হয়। styled-components এবং React Navigation-এর পূর্ণ টাইপ সমর্থন রয়েছে।

কম্পোনেন্ট টাইপিং

React.FC<Props> হল props সহ একটি ফাংশনাল কম্পোনেন্টের টাইপ। চিলড্রেন স্বয়ংক্রিয়ভাবে টাইপ করা হয়। useRef<T> — একটি নেটিভ কম্পোনেন্টের রেফারেন্স। useState<S> — টাইপ ইনফারেন্স সহ স্টেট। useNavigation<T> — টাইপযুক্ত নেভিগেশন। useCallback, useMemo — স্বয়ংক্রিয় টাইপ ইনফারেন্স সহ। সমস্ত React হুক সম্পূর্ণরূপে টাইপ করা।

// টাইপযুক্ত React Native কম্পোনেন্ট
import React, { useState, useCallback } from 'react';
import {
  View, Text, FlatList, TouchableOpacity,
  StyleSheet
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

// ন্যাভিগেশন এবং ডেটার জন্য টাইপ
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

type NavigationProp =
  NativeStackNavigationProp<RootStackParamList, 'Home'>;

// props-এর জন্য ইন্টারফেস
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// টাইপযুক্ত ফাংশনাল কম্পোনেন্ট
const ProductList: React.FC<ProductListProps> = ({
  products,
  onSelect
}) => {
  const navigation = useNavigation<NavigationProp>();
  const [selectedId, setSelectedId] = useState<number | null>(null);

  const handlePress = useCallback((id: number) => {
    setSelectedId(id);
    onSelect(id);
    navigation.navigate('Profile', { userId: String(id) });
  }, [onSelect, navigation]);

  const renderItem = useCallback(({ item }: { item: Product }) => (
    <TouchableOpacity onPress={() => handlePress(item.id)}>
      <Text>{item.title}</Text>
      <Text>${item.price.toFixed(2)}</Text>
    </TouchableOpacity>
  ), [handlePress]);

  return (
    <FlatList
      data={products}
      renderItem={renderItem}
      keyExtractor={(item) => String(item.id)}
    />
  );
};

RootStackParamList টাইপ তাদের প্যারামিটার সহ রুটের একটি অভিধান। NavigationProp টাইপযুক্ত নেভিগেশন প্রদান করে: navigation.navigate('Profile', { userId }) যাচাই করে যে Profile userId গ্রহণ করে। টাইপযুক্ত প্যারামিটার সহ useCallback অপ্রয়োজনীয় রি-রেন্ডার প্রতিরোধ করে। FlatList জেনেরিকের মাধ্যমে টাইপ করা হয়: — data এবং renderItem স্বয়ংক্রিয়ভাবে টাইপ পায়।

TypeScript ডেভেলপার টুলস

TypeScript টুলস-এর মধ্যে রয়েছে tsc কম্পাইলার, tsconfig.json, VS Code-এ IDE সমর্থন, @typescript-eslint সহ ESLint, Prettier এবং DefinitelyTyped (@types/*)। tsc হল কম্পাইলার যা .ts কে .js-এ রূপান্তর করে। tsconfig.json কনফিগার করে: target (ES2020), module (ESNext), strict: true, outDir (আউটপুট ফোল্ডার)। sourceMap — কোড ম্যাপের মাধ্যমে ব্রাউজারে TS ডিবাগিং।

DefinitelyTyped হল বিল্ট-ইন টাইপ ছাড়া লাইব্রেরির জন্য টাইপ সংজ্ঞার একটি ভান্ডার। ইনস্টলেশন: npm install @types/react @types/react-native --save-dev। .d.ts ফাইলগুলি টাইপ ঘোষণা। আধুনিক লাইব্রেরি (React, React Native, Angular) বিল্ট-ইন টাইপ অন্তর্ভুক্ত করে এবং @types/ প্রয়োজন হয় না। পুরানো JS লাইব্রেরির জন্য, DefinitelyTyped হল টাইপের একমাত্র উৎস।

// tsconfig.json — ন্যূনতম কনফিগারেশন
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // শুধু চেক, JS জেনারেশন নেই
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

strict: true বিকল্পটি সমস্ত টাইপ চেক সক্ষম করে — সমস্ত প্রকল্পের জন্য সুপারিশ করা হয়। jsx: 'react-native' রূপান্তর ছাড়াই JSX সংরক্ষণ করে (React Native Babel-এর মাধ্যমে JSX হ্যান্ডেল করে)। moduleResolution: 'node' — Node.js-এর মতো মডিউল রেজোলিউশন। esModuleInterop — CommonJS মডিউলের সাথে সামঞ্জস্য। noEmit: true — JS ফাইল না জেনারেট করে শুধু চেক (Babel বা Metro JS জেনারেট করে)।