TypeScript কী? নন-ডেভেলপারদের জন্য সহজ গাইড

TypeScript হলো টাইপসহ JavaScript। আপনি লেবেল যোগ করেন যে প্রতিটি মান কী ধরনের ডেটা হওয়া উচিত — একটি সংখ্যা, কিছু লেখা, অর্ডারের একটি তালিকা — এবং TypeScript কোড চালানোর আগেই গরমিল খুঁজে দেখে। TypeScript সাইট এটিকে "JavaScript with syntax for types" বলে; টাইপগুলো সাধারণ JavaScript-এ রূপান্তরের সময় বাদ দেওয়া হয়, এবং তখন যেখানে JavaScript চলে সেখানেই এটি চলে।

এআই দিয়ে বানানোর সময় কেন এটি গুরুত্বপূর্ণ

এআই মডেল দ্রুত কোড লেখে, আর দ্রুত লেখা কোডে ভুল থাকে: এক ফাইলে customerName আর অন্য ফাইলে customer_name, টেক্সট হিসেবে পাঠানো দাম, বা একটি ফাংশনে কোনো মান বাদ পড়া। সাধারণ JavaScript-এ এর অনেক ভুল শুধু তখনই দেখা যায়, যখন কেউ ভুল বোতামটি চাপে।

TypeScript এর অনেকগুলো আগে, কোড লেখার সময়েই, ধরে ফেলে:

• এআই তাৎক্ষণিক প্রতিক্রিয়া পায়। টাইপের ভুল ঠিক সেই লাইনটি দেখায়, তাই এজেন্ট আপনি দেখার আগেই ঠিক করতে পারে।
• বদল নিরাপদ হয়। একটি ফিল্টের নাম বদলালে TypeScript সব জায়গা চিহ্নিত করে যেখানে পুরনো নাম এখনো ব্যবহৃত হচ্ছে।
• কোড নিজেই ব্যাখ্যা করে। টাইপগুলো বর্ণনা করে একটি ফাংশন কী আশা করে এবং কী ফেরত দেয়, যা আপনার, এআইয়ের এবং পরে যেকোনো ডেভেলপারের কাজে লাগে।
• এডিটর আরও স্মার্ট হয়। অটোকমপ্লিট ও "go to definition" ভালো কাজ করে, কারণ এডিটর জানে প্রতিটি মান কী।

এ কারণেই অনেক এআই অ্যাপ বিল্ডার ডিফল্টভাবে TypeScript ব্যবহার করে।

একটি দৈনন্দিন উদাহরণ

একটি শিপিং গুদামের কথা ভাবুন, যেখানে প্রতিটি বিভাগে লেবেল আছে: "শুধু প্যালেট", "রেফ্রিজারেটেড", "সর্বোচ্চ ৫০০ কেজি"। কোনো চালান এলে দরজায় একজন পরীক্ষক পণ্যগুলোকে লেবেলের সাথে মেলায়। হিমায়িত মাছ যদি শুকনো-পণ্যের বিভাগে যেতে চায়, তা দরজাতেই আটকানো হয়, এক সপ্তাহ পরে গন্ধ ছড়ালে নয়।

TypeScript হলো সেই দরজার পরীক্ষক। টাইপগুলো হলো লেবেল। পরীক্ষা হয় কাজে লাগার আগে — আপনার কোডে। আর সবকিছু যথাস্থানে বসে গেলে লেবেলগুলো সরিয়ে ফেলা হয়: চলমান JavaScript-এ আর কোনো টাইপ থাকে না।

TypeScript কীভাবে কাজ করে

1. আপনি (বা এআই) .ts বা .tsx ফাইল লেখেন — টাইপ লেবেলসহ TypeScript।
2. টাইপ চেকার কোড পড়ে এবং গরমিলগুলো এডিটর বা বিল্ডে ত্রুটি হিসেবে জানায়।
3. একটি বিল্ড ধাপ টাইপগুলো সরিয়ে দেয়, সাধারণ JavaScript তৈরি করে।
4. JavaScript চলে ব্রাউজারে অথবা সার্ভারে (Node.js, Deno, Bun)।

এর একটি গুরুত্বপূর্ণ ফল: TypeScript আপনার লেখা কোড যাচাই করে, কিন্তু অ্যাপ চলাকালীন যে ডেটা আসে তা যাচাই করে না। কোনো বাইরের API অপ্রত্যাশিত কিছু ফেরত দিলে, রানটাইম ভ্যালিডেশন যোগ না করলে TypeScript তা দেখতে পায় না।

একটি বাস্তব উদাহরণ: একটি বুকিং ফর্ম

ধরুন আপনি একটি হেয়ার সেলুনের বুকিং অ্যাপ বানাচ্ছেন। একটি বুকিং বর্ণনা করার টাইপ এমন:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // ? মানে ঐচ্ছিক
};

এবং একটি ফাংশন যা ডিপোজিট হিসাব করে:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

এখন দেখুন TypeScript কী ধরে।

একটি ভুল বানানের ফিল্ড।

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript জানায় prise একটি জানা প্রপার্টি নয় এবং price নেই। সাধারণ JavaScript-এ এটি নীরবে NaN (সংখ্যা নয়) ডিপোজিট হিসাব করত।

ভুল ধরনের মান।

const booking: Booking = { ...otherFields, price: "40" };

TypeScript জানায় সংখ্যার জায়গায় লেখা ব্যবহার করা যাবে না। টাইপ ছাড়া "40" * 0.2 কাজ করে বলে মনে হয়, কিন্তু "40" + 5 দেয় "405" — এমন ভুল যা ইনভয়েসে ধরা পড়ে।

একটি সেবা যা নেই।

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript জানায় "perm" অনুমোদিত সেবার তালিকায় নেই। পরে সেলুন perm যোগ করলে আপনি টাইপে যোগ করেন, এবং TypeScript দেখায় কোথায় কোথায় বদল দরকার: মূল্য তালিকা, ফর্ম, ক্যালেন্ডারের রং।

যা ধরতে পারে না। বুকিং ফর্ম ব্রাউজার থেকে সার্ভারে price: "40" পাঠালে, সার্ভারের TypeScript রানটাইমে তা দেখে না। এজন্যই ভালো অ্যাপ ইনকামিং ডেটাও যাচাই করে, প্রায়ই একটি ভ্যালিডেশন লাইব্রেরি দিয়ে, যা আকৃতি পরীক্ষা করে একটি সঠিক Booking-এ রূপ দেয়।

TypeScript বনাম JavaScript

জানা দরকারি পরিভাষা

সাধারণ ভুল ও ভুল ধারণা

• "TypeScript কোডকে বাগ-মুক্ত করে।" এটি ডেটার আকৃতির গরমিল ধরে, যুক্তির ভুল নয়। ২% এর জায়গায় ২০% ডিপোজিট হিসাব টাইপ-পরীক্ষায় উত্তীর্ণ হয়ে যায়।
• "টাইপ আমাকে খারাপ ইনপুট থেকে রক্ষা করে।" টাইপগুলো রানটাইমে থাকে না। ব্যবহারকারী, ফর্ম ও API থেকে আসা ডেটা যাচাই করুন।
• সর্বত্র any। এআই আটকে গেলে any বা // @ts-ignore ব্যবহার করে ত্রুটি চুপ করিয়ে দিতে পারে। এতে সমস্যা লুকানো হয়, ঠিক করা হয় না।
• পূর্বরূপ কাজ করছে বলে টাইপ ত্রুটি উপেক্ষা। কিছু টুল টাইপ ত্রুটি থাকা সত্ত্বেও কোড চালায়। ত্রুটিগুলো তবু ভবিষ্যতের বাগ।
• "TypeScript ধীর।" চালানোর আগে টাইপগুলো সরিয়ে ফেলা হয়; যে JavaScript চলে তা মূলত একই।
• "এটি শুধু বড় দলের জন্য।" একা কাজ করা নির্মাতারাও উপকৃত হন, বিশেষত যখন বেশিরভাগ বদল এআই করে।

আপনার এআই বিল্ডারকে কী চাইবেন

• "মূল strict mode চালু রেখে TypeScript ব্যবহার করো।"
• "আমাদের প্রধান রেকর্ড — Customer, Booking, Invoice — এর জন্য শেয়ার্ড টাইপ সংজ্ঞায়িত করো, এবং ফ্রন্টএন্ড ও ব্যাকএন্ড উভয়ে ব্যবহার করো।"
• "ত্রুটি এড়াতে any বা @ts-ignore ব্যবহার করো না; মূল সমস্যা ঠিক করো এবং কী ছিল তা বলো।"
• "শুধু টাইপ নয়, সার্ভারে সব ইনকামিং ডেটা যাচাই করো।"
• "টাইপ চেকার চালাও এবং সব ত্রুটি ঠিক করার পর বলো যে কাজ শেষ।"
• "কোনো ফিল্ডের নাম বদলালে TypeScript যেখানে ধরে সব জায়গায় আপডেট করো।"
• "এই টাইপ ত্রুটিটি সাধারণ ভাষায় ব্যাখ্যা করো।"

এআই যা তৈরি করেছে তা যাচাই করতে আরও জানতে দেখুন এআই-জেনারেটেড কোড কীভাবে রিভিউ করবেন এবং এআই-বানানো অ্যাপের বাগ কীভাবে ডিবাগ করবেন।

Mythex-এ TypeScript

কিছু নির্দিষ্ট না চাইলে Mythex নতুন প্রজেক্ট শুরু করে Vite + React + TypeScript + Tailwind দিয়ে। কোড এডিটরে ভাষা-বুদ্ধিমত্তা আছে — TypeScript ও JavaScript-এর জন্য কমপ্লিশন, ডায়াগনস্টিক ও go-to-definition সহ, এবং আরও কয়েকটি ভাষার জন্য — তাই টাইপ ত্রুটি শুধু প্রিভিউতে নয়, কোডেও দেখা যায়। এডিটর Free-এ শুধু পড়ার জন্য এবং Pro-তে সম্পূর্ণ সম্পাদনাযোগ্য। প্রথম প্রম্পটে অন্য সেটআপ চাইতে পারেন; প্রযুক্তি কীভাবে বাছা হয় ডক্স পেজে ব্যাখ্যা আছে, এবং কোড এডিটর ডক্স এডিটর কী দেখায় তা বলে।

প্রশ্নোত্তর