TypeScript-এর শুরু — টাইপ দিয়ে নিরাপদ JavaScript

১ · সমস্যা: JavaScript টাইপের ভুল ধরে শুধু চলার সময়

পর্ব ০৬-এ দেখেছেন, JavaScript dynamically typed — টাইপ থাকে মানের গায়ে, আর যাচাই হয় কোড চলার মুহূর্তে। ছোট script-এ এটি আরামদায়ক। কিন্তু একটি অনলাইন দোকানের কোড ভাবুন, যেখানে দশজন মানুষ দুই বছর ধরে কাজ করছেন। নিচের কোডে দুটি ভুল আছে। খুঁজে পান কি না দেখুন:

function cartTotal(items, delivery) {
  const sub = items.reduce((sum, it) => sum + it.price * it.qty, 0);
  return sub + delivery;
}

const cart = [{ name: "চা", price: 20, qty: 3 }, { name: "সিঙ্গারা", price: 10, qty: 4 }];
const deliveryInput = "60";              // input.value — সবসময় string
console.log(cartTotal(cart, deliveryInput));

const order = { id: 7, total: 160 };
console.log(order.totl * 2);             // total-এর বানান ভুল

এই ভুলগুলো কে ধরবে? JavaScript-এ উত্তর হলো: যিনি কোডটি চালাবেন. ভাগ্য ভালো হলে আপনি নিজে, টেস্ট লেখার সময় (পর্ব ৪৮)। ভাগ্য খারাপ হলে ব্যবহারকারী, রাত দুটোয়। সমস্যাটা মৌলিক: “এখানে সংখ্যা আসার কথা”, “Order-এ total নামে ঘর আছে” — এই জ্ঞান প্রোগ্রামারের মাথায় থাকে, কোডে লেখা থাকে না। তাই কোনো টুল তা যাচাই করতে পারে না।

যেসব ভাষায় টাইপ কোডে লেখা থাকে আর চালানোর আগেই যাচাই হয় (C, C++, Java), তাদের বলে statically typed. TypeScript JavaScript-কে এই সুবিধা দেয় — কিন্তু JavaScript-কে বদলে না দিয়ে। কীভাবে, সেটিই এই পর্বের মূল গল্প।

২ · TypeScript কী — টাইপ লেখা, আগে যাচাই, তারপর মুছে ফেলা

TypeScript হলো JavaScript-এর একটি superset: সব বৈধ JavaScript কোড (প্রায়) বৈধ TypeScript, আর TypeScript তার ওপর যোগ করে একটি জিনিস — type annotation, অর্থাৎ নামের পরে : টাইপ লিখে বলে দেওয়া কোন মান কোন ধরনের। function cartTotal(items: Item[], delivery: number): number পড়েই বোঝা যায়: দ্বিতীয় argument অবশ্যই number, আর ফলও number.

এর চেয়েও গুরুত্বপূর্ণ হলো TypeScript কী করে না. এটি নতুন runtime নয়; browser বা Node.js কখনো TypeScript চালায় না। TypeScript compiler (tsc) দুটি আলাদা কাজ করে: টাইপ যাচাই, আর টাইপ মুছে সাধারণ JavaScript তৈরি। একে বলে type erasure. নিচের ডায়াগ্রামে ধাপগুলো দেখুন:

type Item = { price: number; qty: number };
function total(items: Item[], delivery: number): number {
  return items.reduce((s, it) => s + it.price * it.qty, 0) + delivery;
}
total(cart, "60");

// delivery-র টাইপ: number
// পাঠানো মান "60"-এর টাইপ: string
// string কি number-এর জায়গায় বসে? — না

cart.ts(4,13): error TS2345: Argument of type 'string'
  is not assignable to parameter of type 'number'.

function total(items, delivery) {
  return items.reduce((s, it) => s + it.price * it.qty, 0) + delivery;
}
// type Item … লাইনটি পুরোপুরি উধাও

// engine জানেই না কোনোদিন টাইপ ছিল
// বাইরে থেকে ভুল ডেটা এলে কেউ আটকাবে না
// (তাই অংশ ৮-এ যাচাইয়ের কৌশল)

নিজে চালিয়ে দেখুন — প্রথমে ঠিক কোড, তারপর ভুল কোড

নিচের কোড ব্লকটি সত্যিকারের TypeScript 5.6 compiler-এ যায়: আগে টাইপ যাচাই, সব ঠিক থাকলে তারপর চলে। একটু সময় লাগে (৫–১০ সেকেন্ড)। Order টাইপের | চিহ্ন আর never-এর কৌশল অংশ ৬-এ বিস্তারিত দেখবেন — এখন শুধু চালিয়ে দেখুন।

type Item = { name: string; price: number; qty: number };
type Order =
  | { status: "pending"; id: number }
  | { status: "paid"; id: number; paidAt: string }
  | { status: "shipped"; id: number; courier: string };
function cartTotal(items: Item[], delivery: number): number {
  const sub = items.reduce((sum, it) => sum + it.price * it.qty, 0);
  return sub + delivery;
}
function deliveryText(o: Order): string {
  switch (o.status) {
    case "pending": return `#${o.id}: পেমেন্টের অপেক্ষায়`;
    case "paid":    return `#${o.id}: পেমেন্ট হয়েছে, তারিখ ${o.paidAt}`;
    case "shipped": return `#${o.id}: ${o.courier} কুরিয়ারে পাঠানো হয়েছে`;
    default: {
      const unreachable: never = o;   // কোনো case বাদ পড়লে এখানে error
      return unreachable;
    }
  }
}
const cart: Item[] = [{ name: "চা", price: 20, qty: 3 }, { name: "সিঙ্গারা", price: 10, qty: 4 }];
console.log("মোট:", cartTotal(cart, 60));
console.log(deliveryText({ status: "paid", id: 7, paidAt: "১০ অক্টোবর" }));
console.log(deliveryText({ status: "shipped", id: 8, courier: "ঢাকা এক্সপ্রেস" }));

এবার অংশ ১-এর সেই দুটি ভুল TypeScript-এ লিখি। data-expect-error চিহ্নিত এই ব্লক ইচ্ছা করেই ভুল — চালিয়ে দেখুন কী হয়:

type Item = { name: string; price: number; qty: number };
type Order = { id: number; total: number };

function cartTotal(items: Item[], delivery: number): number {
  const sub = items.reduce((sum, it) => sum + it.price * it.qty, 0);
  return sub + delivery;
}

const cart: Item[] = [{ name: "চা", price: 20, qty: 3 }];
const deliveryInput = "60";          // input.value সবসময় string
console.log("শুরু হলো");
console.log(cartTotal(cart, deliveryInput));

const order: Order = { id: 7, total: 160 };
console.log(order.totl * 2);

prog.ts(12,29): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
prog.ts(15,19): error TS2551: Property 'totl' does not exist on type 'Order'. Did you mean 'total'?

বিনিময়ে কী পান, আর কী দিতে হয়

৩ · সেটআপ — tsc, tsconfig আর strict

TypeScript একটি npm package. প্রজেক্টের ভেতরে development dependency হিসেবে বসানোই প্রচলিত, যাতে দলের সবাই একই version পান (npm আর Vite নিয়ে বিস্তারিত পর্ব ৪৬-এ):

npm install --save-dev typescript   # প্রজেক্টে TypeScript বসানো
npx tsc --init                      # tsconfig.json তৈরি
npx tsc --noEmit                    # শুধু টাইপ যাচাই, কোনো ফাইল লেখা হবে না
npx tsc                             # যাচাই + .js ফাইল তৈরি

সব সেটিং থাকে tsconfig.json-এ। শুরুতে অনেক বিকল্প দেখে ভয় পাবেন না — আধুনিক প্রজেক্টে মূল কয়েকটিই যথেষ্ট:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noEmit": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

.ts ফাইল সরাসরি চালানো — Node.js, tsx আর Vite

• Vite (browser প্রজেক্ট): .ts ফাইল import করলেই চলে — Vite ভেতরে একটি দ্রুত transformer দিয়ে (Vite 8-এ Oxc, আগের সংস্করণে esbuild) টাইপ মুছে নেয়। টাইপ যাচাইয়ের জন্য editor আর tsc --noEmit.
• Node.js-এর type stripping: Node 22.6-এ --experimental-strip-types flag দিয়ে এটি পরীক্ষামূলকভাবে আসে; Node 23.6 থেকে flag ছাড়াই চালু, আর পরে Node 22-এর আপডেটেও আসে। Node 24-এ node app.ts লিখলেই চলে। কিন্তু দুটি সীমা মনে রাখুন: এটি শুধু টাইপ মুছে দেয়, যাচাই করে না; আর যেসব TypeScript syntax-এর জন্য সত্যিকারের JavaScript কোড বানাতে হয় (যেমন enum), তা strip-only mode-এ চলে না — Node error দেয়: TypeScript enum is not supported in strip-only mode.
• tsx বা ts-node: পুরোনো Node version-এ বা সব syntax-সহ চালাতে npx tsx app.ts. tsx-ও (esbuild দিয়ে) টাইপ যাচাই করে না, শুধু মোছে।

লক্ষ করুন একটি ধরন: আধুনিক টুলচেইনে “চালানো” আর “যাচাই করা” আলাদা কাজ. চালানো দ্রুত হয় কারণ টাইপ শুধু মুছে ফেলা হয়; যাচাই করে editor আর CI-তে tsc. এই ভাগাভাগির কারণে TypeScript 5.8-এ erasableSyntaxOnly নামে একটি সেটিং যোগ হয়েছে, যা শুধু “মুছে ফেলা যায়” এমন syntax-এর অনুমতি দেয় — enum, namespace বা constructor-এর parameter property নিষেধ করে।

৪ · মৌলিক টাইপ, inference আর any / unknown / never

TypeScript-এর মৌলিক টাইপগুলো JavaScript-এর primitive-গুলোর সাথেই মেলে (পর্ব ০৬) — শুধু ছোট হাতের অক্ষরে লেখা:

Type inference — সব কিছুতে টাইপ লিখবেন না

নতুনরা প্রায়ই প্রতিটি variable-এ টাইপ লেখেন: const count: number = 5;. দরকার নেই। Type inference মানে compiler নিজেই মান দেখে টাইপ বের করে: const count = 5-এ টাইপ 5 (একটি literal টাইপ, অংশ ৬), let total = 0-এ number, const names = ["Rafi", "Mim"]-এ string[]. Function-এর ফেরত টাইপও বের হয়ে যায়। VS Code-এ যেকোনো নামের ওপর মাউস রাখলে inferred টাইপ দেখায়।

প্রচলিত নিয়ম: সীমানায় টাইপ লিখুন, ভেতরে inference-এর ওপর ছাড়ুন। সীমানা মানে function-এর parameter (এদের টাইপ কখনো inference হয় না), বাইরে export করা function-এর ফেরত টাইপ, আর বাইরে থেকে আসা ডেটার আকার। ফাঁকা array বা পরে মান বসবে এমন variable-এও টাইপ লাগে: const items: Item[] = [];.

any, unknown আর never — তিন বিশেষ টাইপ

• any — “এখানে টাইপ-যাচাই বন্ধ”. যেকোনো মান বসে, যেকোনো কিছু করা যায়, আর এটি যেখানে যায় সেখানেও যাচাই বন্ধ করে দেয়। এটি TypeScript-এর ভেতরে একটি JavaScript-এর জানালা।
• unknown — “কী আছে জানি না, তাই আগে দেখে নাও”. যেকোনো মান বসে, কিন্তু যাচাই না করে প্রায় কিছুই করা যায় না। বাইরের ডেটার জন্য এটিই সঠিক টাইপ।
• never — “এমন মান কখনো থাকতে পারে না”. যে function সবসময় throw করে, তার ফেরত টাইপ; আর সব সম্ভাবনা বাদ যাওয়ার পর যা থাকে (অংশ ৬)।

JSON.parse-এর ফেরত টাইপ any — TypeScript-এর ইতিহাসের একটি আপস। নিচে একই ডেটা দুইভাবে নিলে কী হয়, ধাপে ধাপে দেখুন (strict mode ধরে):

৫ · function আর object-এর টাইপ — type, interface আর structural typing

function-এর টাইপ

function price(base: number, vatRate = 0.15, coupon?: string): number {
  const withVat = base * (1 + vatRate);          // vatRate: number (default থেকে inferred)
  return coupon === "EID10" ? withVat * 0.9 : withVat;   // coupon: string | undefined
}

const notify = (msg: string): void => console.log(msg);
type Formatter = (amount: number) => string;      // function-এর টাইপ
const toTaka: Formatter = n => `৳${n.toFixed(2)}`; // n-এর টাইপ লিখতে হয়নি

object-এর টাইপ: type alias আর interface

Object-এর আকার বর্ণনার দুটি উপায় আছে। type alias যেকোনো টাইপকে একটি নাম দেয়; interface শুধু object-এর আকার বর্ণনা করে:

type Product = {
  readonly id: number;          // একবার বসানোর পর বদলানো যাবে না
  name: string;
  price: number;
  discount?: number;            // ঐচ্ছিক ঘর
};

interface Customer {
  name: string;
  phone: string | null;
}

type StockByShop = Record<string, number>;     // { [shop: string]: number }-এর ছোট রূপ
const stock: StockByShop = { mirpur: 12, uttara: 0 };

type না interface? Object-এর জন্য দুটিই প্রায় একই কাজ করে। পার্থক্য কয়েকটি: interface extends দিয়ে বাড়ানো যায় আর একই নামে দুবার লিখলে মিশে যায় (declaration merging — লাইব্রেরির টাইপ বাড়াতে কাজের); type দিয়ে union, tuple, function টাইপসহ সবকিছুর নাম দেওয়া যায়। ব্যবহারিক নিয়ম: দলে যেকোনো একটি ধারাবাহিকভাবে ব্যবহার করুন; union দরকার হলে type.

Structural typing — নাম নয়, আকার দেখে মেলানো

Java বা C#-এ একটি class অন্য টাইপের জায়গায় বসে শুধু তখনই, যখন সে স্পষ্ট করে implements বা extends লেখে — একে বলে nominal typing (নাম দেখে)। TypeScript ব্যবহার করে structural typing: কোনো মানের মধ্যে প্রয়োজনীয় সব ঘর ঠিক টাইপে থাকলেই সে মেলে, নাম যাই হোক। JavaScript-এর জগতে object প্রায়ই literal বা JSON থেকে তৈরি হয়, কোনো class থেকে নয় — তাই এই নকশা। ধাপে ধাপে দেখুন:

Structural typing-এর একটি ফাঁদও আছে: type UserId = number আর type OrderId = number — দুটি আসলে একই টাইপ, তাই ভুল করে order-এর আইডি user-এর জায়গায় দিলে compiler ধরে না। দরকার হলে “brand” কৌশল (number & { __brand: "UserId" }) দিয়ে nominal আচরণ নকল করা যায় — ভাবনার প্রশ্ন ২-এ এর পেছনের তত্ত্ব।

৬ · union, narrowing আর discriminated union

বাস্তব JavaScript-এ একটি মান প্রায়ই কয়েক রকমের হতে পারে: ফোন নম্বর string বা null; একটি id number বা string. Union type এটিই প্রকাশ করে: string | number মানে “string অথবা number”. কিন্তু union-এর ওপর শুধু সেই কাজগুলো করা যায়, যা সব সদস্যের জন্য বৈধ — (id: string | number)-এর ওপর id.toFixed() লিখলে error: Property 'toFixed' does not exist on type 'string | number'.

সমাধান narrowing: আপনি সাধারণ JavaScript-এর শর্ত লেখেন, আর compiler সেই শর্ত পড়ে প্রতিটি শাখায় টাইপ সংকুচিত করে নেয়। নতুন কোনো syntax লাগে না — এটাই TypeScript-এর সবচেয়ে চতুর নকশা:

function formatId(id: string | number): string {
  if (typeof id === "number") {
    return id.toFixed(0);        // এখানে id: number
  }
  return id.toUpperCase();       // এখানে id: string — number আগেই বেরিয়ে গেছে
}

function contact(c: { phone: string } | { email: string }): string {
  return "phone" in c ? `ফোন: ${c.phone}` : `ইমেইল: ${c.email}`;   // in দিয়ে narrowing
}

Literal type আর as const

টাইপ শুধু “যেকোনো string” নয়, একটি নির্দিষ্ট মানও হতে পারে: "paid" টাইপে শুধু "paid" লেখাটিই বসে। এগুলো literal type, আর এদের union দিয়ে বানানো যায় একটি নির্দিষ্ট তালিকা: type Status = "pending" | "paid" | "shipped". এখন "shiped" লিখলে error: Type '"shiped"' is not assignable to type 'Status'. Did you mean '"shipped"'? — বানান ভুল চালানোর আগেই ধরা পড়ল, সাথে সঠিক বানানের পরামর্শও।

একটি সূক্ষ্মতা: const s = "paid"-এর টাইপ "paid", কিন্তু let s = "paid"-এর টাইপ string — কারণ let পরে বদলাতে পারে (একে বলে widening). Object আর array-র ঘরও widen হয়। পুরো মানকে অপরিবর্তনীয় literal হিসেবে রাখতে আছে as const:

const STATUSES = ["pending", "paid", "shipped"] as const;
type Status = (typeof STATUSES)[number];   // "pending" | "paid" | "shipped"

const config = { mode: "dark", retries: 3 } as const;
// config.mode = "light";  → Cannot assign to 'mode' because it is a read-only property.

Discriminated union — অবস্থা দিয়ে ডেটা চেনা

অংশ ২-এর Order-এ ফিরে যাই। একটি অর্ডারের তিনটি অবস্থা, আর প্রতিটি অবস্থায় আলাদা তথ্য থাকে: paid হলে পেমেন্টের তারিখ, shipped হলে কুরিয়ারের নাম। সব ঘর ঐচ্ছিক করে একটি টাইপ বানালে (paidAt?, courier?) অসম্ভব অবস্থাও বৈধ হয়ে যায় — “pending, অথচ কুরিয়ার আছে”. তার বদলে প্রতিটি অবস্থার আলাদা টাইপ বানিয়ে union করা হয়, আর সবার মধ্যে থাকে একটি সাধারণ literal ঘর (status) — যাকে বলে discriminant. একেই বলে discriminated union. নিচে compiler-এর চোখে প্রতিটি লাইনে o-এর টাইপ দেখুন:

1function label(o: Order): string {2  if (o.status === "pending") {3    return `#${o.id} অপেক্ষায়`;4  }5  switch (o.status) {6    case "paid":    return o.paidAt;7    case "shipped": return o.courier;8    default:        return assertNever(o);9  }10}

function assertNever(x: never): never {
  throw new Error("অপ্রত্যাশিত মান: " + JSON.stringify(x));
}

৭ · generics, utility type আর as / ! — শক্তি ও বিপদ

Generics — টাইপের parameter

একটি function চাই যা যেকোনো array-র প্রথম উপাদান দেয়। (arr: any[]): any লিখলে টাইপের তথ্য হারায় — ফলের টাইপ কী, কেউ জানে না। Generics দিয়ে টাইপকেও parameter বানানো যায়:

function first<T>(arr: T[]): T | undefined {
  return arr[0];
}
const n = first([10, 20]);        // n: number | undefined
const s = first(["চা", "কফি"]);   // s: string | undefined

function groupBy<T, K extends PropertyKey>(items: T[], keyOf: (item: T) => K): Record<K, T[]> {
  const out = {} as Record<K, T[]>;
  for (const item of items) {
    (out[keyOf(item)] ??= []).push(item);
  }
  return out;
}
const byArea = groupBy(orders, o => o.area);   // Record<string, Order[]>

Generics আপনি প্রতিদিনই ব্যবহার করছেন: Array<Order>, Map<string, number>, আর async function-এর ফেরত টাইপ Promise<Product> — “একটি Promise, যা পূর্ণ হলে Product দেবে” (পর্ব ৩৩–৩৪)। নিয়ম: নিজের কোডে generics লিখুন যখন একই যুক্তি বিভিন্ন টাইপে খাটে আর ইনপুট-আউটপুটের টাইপের সম্পর্ক রাখা জরুরি। পাঁচ স্তরের জটিল conditional type সাধারণ অ্যাপ কোডে প্রায় কখনো লাগে না।

Utility type — টাইপ থেকে নতুন টাইপ

এগুলোকে বলে utility type — TypeScript-এর সাথে আসা তৈরি generic টাইপ। মূল সুবিধা: একটিই উৎস (Product) থেকে সব রূপ বের হয়। Product-এ নতুন ঘর যোগ করলে সব রূপ নিজে থেকে হালনাগাদ হয়।

as আর ! — compiler-কে চুপ করানোর অস্ত্র

Type assertion (value as Type) মানে compiler-কে বলা: “হিসাব যা-ই বলুক, এটি এই টাইপ — মেনে নাও”. এটি কোনো রূপান্তর বা যাচাই করে না — চলার সময় পুরোপুরি মুছে যায়। const user = JSON.parse(text) as User; লিখলে compiler সন্তুষ্ট, কিন্তু JSON-এ যা-ই থাকুক, কেউ দেখল না। বাকি সব কোড এখন একটি মিথ্যা টাইপের ওপর দাঁড়িয়ে।

Non-null assertion (!) হলো ছোট রূপ: document.querySelector("input")! মানে “এটি null হবে না, আমি নিশ্চিত”. HTML-এ element না থাকলে চলার সময় সেই পুরোনো TypeError: Cannot read properties of null.

৮ · বাস্তব প্রজেক্টে — API ডেটা, class, enum, .d.ts আর ধীরে ধীরে migration

API-র ডেটা — টাইপ মুছে যায়, তাই যাচাই চাই

পর্ব ৩৫-এ fetch দেখেছেন। res.json()-এর ফেরত টাইপ Promise<any> — অর্থাৎ সার্ভার থেকে আসা সব কিছু চুপচাপ যাচাইহীন। সার্ভার, অন্য দল, পুরোনো app version — কেউই আপনার টাইপ মানতে বাধ্য নয়। সঠিক পথ: সীমানায় unknown, তারপর যাচাই, তারপর ভেতরে নিশ্চিন্তে টাইপ।

type Product = { id: number; name: string; price: number };

function isProduct(x: unknown): x is Product {
  return typeof x === "object" && x !== null
    && "id" in x && typeof x.id === "number"
    && "name" in x && typeof x.name === "string"
    && "price" in x && typeof x.price === "number";
}

async function loadProduct(id: number): Promise<Product> {
  const res = await fetch(`/api/products/${id}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const data: unknown = await res.json();
  if (!isProduct(data)) throw new Error("সার্ভারের ডেটা প্রত্যাশিত আকারে নেই");
  return data;                       // এখানে data: Product
}

import { z } from "zod";

const ProductSchema = z.object({
  id: z.number().int(),
  name: z.string().min(1),
  price: z.number().nonnegative(),
});
type Product = z.infer<typeof ProductSchema>;   // টাইপ schema থেকেই বের হলো

const product = ProductSchema.parse(await res.json());   // ভুল হলে স্পষ্ট ZodError

TypeScript-এ class — সংক্ষেপে

পর্ব ২৬-এর class TypeScript-এ একইভাবে চলে, সাথে যোগ হয় ঘরের টাইপ আর access modifier: public, private, protected. এখানে একটি গুরুত্বপূর্ণ পার্থক্য আছে:

class Account {
  private balance = 0;          // শুধু compile-এর সময় লুকানো
  #pin: string;                 // JavaScript-এর আসল private — চলার সময়ও লুকানো
  constructor(readonly owner: string, pin: string) { this.#pin = pin; }
  deposit(amount: number): void { this.balance += amount; }
}

enum বনাম union literal

TypeScript-এর enum (enum Status { Pending, Paid }) JavaScript-এ নেই — compiler একটি সত্যিকারের object বানায়। এর কিছু অস্বস্তি আছে: সংখ্যাভিত্তিক enum-এ যেকোনো সংখ্যা বসে যায় (পুরোনো version-এ), চলার সময় বাড়তি কোড থাকে, আর Node.js-এর type stripping-এ চলে না। আধুনিক পরামর্শ: union literal পছন্দ করুন — type Status = "pending" | "paid", দরকার হলে as const array বা object-এর সাথে। এটি শুধু টাইপ, মুছে ফেলা যায়, আর JSON-এ যা আসে ("paid") তার সাথে সরাসরি মেলে। পুরোনো কোডবেসে enum দেখলে ভয়ের কিছু নেই; এটি নিষিদ্ধ নয়, শুধু নতুন কোডে কম ব্যবহৃত হচ্ছে।

.d.ts আর @types — JavaScript লাইব্রেরির টাইপ

npm-এর অনেক লাইব্রেরি সাধারণ JavaScript-এ লেখা। তাদের টাইপ বর্ণনা থাকে declaration file-এ (.d.ts) — শুধু টাইপ, কোনো কোড নেই। অনেক লাইব্রেরি নিজেই .d.ts সাথে দেয় (Zod, Vite). যারা দেয় না, তাদের জন্য সম্প্রদায় চালিত DefinitelyTyped প্রকল্প @types/… package বানায়: npm i -D @types/node, @types/express. Node.js-এর process বা fs চিনতেও @types/node লাগে — না থাকলে error: Cannot find name 'process'. Do you need to install type definitions for node?

TypeScript ছাড়াই টাইপ: JSDoc আর // @ts-check

Build ধাপ যোগ করতে না চাইলে একটি মৃদু পথ আছে। সাধারণ .js ফাইলের প্রথম লাইনে // @ts-check লিখুন আর JSDoc comment-এ টাইপ দিন:

// @ts-check
/** @typedef {{ name: string, price: number, qty: number }} Item */

/** @param {Item[]} items  @param {number} delivery  @returns {number} */
function cartTotal(items, delivery) {
  return items.reduce((s, it) => s + it.price * it.qty, 0) + delivery;
}

পুরোনো JavaScript প্রজেক্ট ধীরে ধীরে TypeScript-এ

1. পাশাপাশি চালান: tsconfig-এ "allowJs": true — .js আর .ts একসাথে থাকে; কাউকে সব একদিনে বদলাতে হয় না।
2. সীমানা থেকে শুরু করুন: আগে ডেটার টাইপ (API response, Order, User) আর সবচেয়ে বেশি ব্যবহৃত utility ফাইলগুলো .ts করুন — সেখানে লাভ সবচেয়ে বেশি।
3. কড়াকড়ি ধাপে ধাপে বাড়ান: শুরুতে strict: false চললে, এরপর noImplicitAny, তারপর strictNullChecks, শেষে পুরো strict. প্রতিটি ধাপে error-এর সংখ্যা কমিয়ে শূন্যে আনুন।
4. any-কে ঋণ হিসেবে দেখুন: সাময়িক any চলতে পারে, কিন্তু গুনে রাখুন; typescript-eslint-এর no-explicit-any নিয়ম (ESLint নিয়ে পর্ব ৪৬-এ) নতুন any ঢোকা আটকায়।

Error বার্তা পড়ার কৌশল

TypeScript-এর লম্বা error ভয় দেখায়, কিন্তু গঠন সবসময় এক: “Type A is not assignable to type B”, তারপর ইন্ডেন্ট করা লাইনে কেন. যেমন Type 'number | undefined' is not assignable to type 'number'.-এর নিচে লেখা থাকে Type 'undefined' is not assignable to type 'number'. — সবচেয়ে ভেতরের (শেষ) লাইনটি আসল কারণ। বাকিগুলো সেখানে পৌঁছানোর পথ। কয়েকটি পরিচিত কোড: TS2322 (টাইপ মেলে না), TS2345 (argument মেলে না), TS2339 (property নেই), TS18047 (null হতে পারে), TS7006 (implicit any). এই কোড দিয়ে সার্চ করলে ব্যাখ্যা সহজে পাওয়া যায়।

কখন TypeScript বাড়াবাড়ি?

এক-দুই ফাইলের script, একবার চালিয়ে ফেলে দেওয়ার কাজ, শেখার শুরুর দিন, বা ছোট পরীক্ষামূলক প্রোটোটাইপে TypeScript-এর খরচ লাভের চেয়ে বেশি হতে পারে — সেখানে // @ts-check যথেষ্ট। আবার বহুজনের, বহু মাসের, বা লাইব্রেরি হিসেবে অন্যরা ব্যবহার করবে এমন কোডে TypeScript এখন শিল্পের প্রায় ডিফল্ট। আর মনে রাখুন: TypeScript টেস্টের বদলি নয়। টাইপ বলে “price একটি number”; টেস্ট বলে “ছাড়ের পর price ঠিক ৪৫০” (পর্ব ৪৮)।

৯ · AI-এর যুগে — any আর as দিয়ে error চাপা দেওয়া

AI টুল TypeScript খুব দ্রুত লেখে, আর একটি নির্দিষ্ট দুর্বলতা দেখায়: তার লক্ষ্য প্রায়ই “লাল দাগ চলে যাক”, “টাইপ সত্য হোক” নয়। Compiler error দেখলে সবচেয়ে ছোট সমাধান হলো as any বা ! — error চলে যায়, বাগ থেকে যায়, আর এখন সেটি লুকানো। আরও একটি সমস্যা: AI API-র response দেখে সুন্দর একটি interface লেখে, কিন্তু যাচাই লেখে না — ফলে টাইপ বাস্তব ডেটার সাথে মেলে কি না, কেউ জানে না।

AI-এর TypeScript হাতে পেলে — চেকলিস্ট

• any, as, !, @ts-ignore খুঁজে প্রতিটির যৌক্তিকতা যাচাই করেছি
• বাইরে থেকে আসা ডেটা (API, JSON.parse, localStorage, form) চলার সময় যাচাই হচ্ছে, শুধু টাইপ লেখা নয়
• tsc --noEmit strict mode-এ শূন্য error দিচ্ছে — শুধু editor-এ দেখে সন্তুষ্ট হইনি
• অবস্থাভিত্তিক ডেটা discriminated union, আর switch-এ never দিয়ে সব case নিশ্চিত
• টাইপগুলো পড়ে বুঝতে পারছি; অপ্রয়োজনীয় enum, class আর জটিল generic সরল করেছি