JavaScript ও TypeScript রোডম্যাপ: প্রথম script থেকে full stack

JavaScript ওয়েব browser-এর ভাষা এবং Node.js (ও Deno, Bun-এর মতো অনুরূপ runtime) দিয়ে server-এও চলে। TypeScript হলো type যোগ করা JavaScript, যা সাধারণ JavaScript-এ compile হয়। একসাথে এরা এক ভাষা পরিবারে front end, back end ও টুল বানাতে দেয়।

ধাপ ১: মূল JavaScript

• মান ও type: সংখ্যা, string, boolean, null, undefined, object, array।
• Variable: ডিফল্টে const, পুনর্নির্ধারণে let, var এড়ান।
• Operator, template string ও তুলনা। ==-এর বদলে === পছন্দ করুন।
• শর্ত ও loop: if, switch, for, for...of, while।
• Function: declaration, expression, arrow function, ডিফল্ট ও rest parameter।
• Object ও array: property, destructuring, spread, এবং array method map, filter, reduce, find, some।
• Truthy ও falsy মান, এবং type রূপান্তর কীভাবে চমক দিতে পারে।

const users = [{ name: "Ana", age: 31 }, { name: "Raj", age: 17 }];
const adultNames = users.filter(u => u.age >= 18).map(u => u.name);

ধাপ ২: ভাষা আসলে কীভাবে কাজ করে

• Scope ও closure।
• this এবং function কীভাবে ডাকা হয় তার ওপর এটি কীভাবে নির্ভর করে।
• Prototype ও class।
• Module (import ও export)।
• try/catch দিয়ে error সামলানো।
• Immutability অভ্যাস: যে object আপনি বানাননি তা বদলাবেন না।

ধাপ ৩: Asynchronous JavaScript

JavaScript-এর বড় অংশ অপেক্ষা: network request, timer, ফাইল।

• Event loop এবং JavaScript কেন single-threaded কিন্তু non-blocking।
• Callback, তারপর promise, তারপর async/await।
• API কলে fetch, এবং error ও status code সামলানো।
• কাজ সমান্তরালে চালাতে Promise.all।

async function getUser(id) {
  const res = await fetch("/api/users/" + id);
  if (!res.ok) throw new Error("Request failed: " + res.status);
  return res.json();
}

ধাপ ৪: Browser-এ

• DOM: element বাছা, বানানো ও বদলানো।
• Event ও event delegation।
• ফর্ম ও যাচাই।
• Browser storage ও তার সীমা (সেখানে কখনো secret রাখবেন না)।
• Debug-এর জন্য DevTools।
• Framework ব্যবহারের আগে কয়েকটি ছোট interactive পেজ বানান।

ধাপ ৫: Server-এ Node.js

• Script চালানো, npm ব্যবহার, package.json পড়া।
• ফাইল সিস্টেম, environment variable ও command-line আর্গুমেন্ট।
• Express, Fastify বা অনুরূপ দিয়ে HTTP API বানানো।
• Database সংযোগ, authentication ও যাচাই।
• ভারী CPU কাজে event loop আটকে দিলে প্রতিটি request ক্ষতিগ্রস্ত হয় বোঝা।

ধাপ ৬: TypeScript

JavaScript-এ স্বচ্ছন্দ হলে TypeScript যোগ করুন।

• মৌলিক type: string, number, boolean, array, tuple।
• Interface ও type alias, union ("asc" | "desc"), ঐচ্ছিক property।
• পুনর্ব্যবহারযোগ্য typed কোডের জন্য Generic।
• Narrowing: typeof x === "string"-এর মতো যাচাই compiler বোঝে।
• tsconfig.json-এ strict মোড কনফিগার করুন।
• any এড়ান। unknown ব্যবহার করে narrow করুন।

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

function greet(user: User): string {
  return "Hello, " + user.name;
}

Type শুধু compile সময়ে থাকে। এগুলো runtime-এ আসা data (যেমন API উত্তর) যাচাই করে না, তাই অবিশ্বস্ত ইনপুট schema library দিয়ে যাচাই করুন।

ধাপ ৭: টুলিং ও মান

• Formatter ও linter (Prettier, ESLint)।
• Bundler ও dev server (Vite, esbuild)।
• Testing: unit test-এ Vitest বা Jest, end-to-end test-এ Playwright বা Cypress।
• Git, CI এবং package ব্যবস্থাপনা অভ্যাস (lockfile, dependency audit)।

ধাপ ৮: framework ও full stack

• Front end: React, Vue, Svelte বা Angular। একটি বাছুন।
• Full stack: Next.js, Nuxt, SvelteKit, Remix, Astro।
• Back end: NestJS, Fastify, tRPC।
• Database: ORM বা query builder-সহ SQL, এবং Redis।

প্রজেক্ট আইডিয়া

• নতুন: quiz, counter, browser-এ সংরক্ষিত to-do তালিকা।
• মাঝারি: API ব্যবহার করে আবহাওয়া বা মুভি অ্যাপ, markdown নোট টুল।
• উন্নত: login, database, test ও deployment-সহ full-stack অ্যাপ।

সাধারণ ফাঁদ

• == ব্যবহার করে type coercion-এ অবাক হওয়া।
• Promise await করতে ভুলে যাওয়া, বা rejected promise না সামলানো।
• ভাগ করা object অনিচ্ছাকৃতভাবে বদলানো।
• 0.1 + 0.2-এর মতো floating-point গণিত।
• যাচাই ছাড়া client বা API-র data বিশ্বাস করা।
• যাচাই না করে অনেক dependency যোগ করা। Package একটি supply-chain ঝুঁকি, তাই কম রাখুন ও হালনাগাদ রাখুন।

মূল কথা: আগে JavaScript মৌলিক ও async কোড শিখুন, browser ও Node.js-এ অনুশীলন করুন, তারপর strict মোডে TypeScript যোগ করুন। ছোট প্রজেক্ট বানিয়ে deploy করুন এবং সব বাইরের data যাচাই করুন।

---

প্রোগ্রামিং রোডম্যাপ সিরিজ, পর্ব ২ (ভাষা ও নকশা): 2 নম্বর (মোট 5)। আগের লেখা: Python শেখার রোডম্যাপ: মৌলিক থেকে আসল প্রজেক্ট.