TypeScript Tutorial Tamil-ல: Types, Interface எதுக்கு, Job Post-ல ஏன் கேக்குறாங்க?

ஏன் இப்போ எல்லா Job Post-லயும் TypeScript கேக்குறாங்க?#

Naukri, LinkedIn-ல 'Frontend Developer' இல்லாட்டி 'Node Developer'-ன்னு Search பண்ணி பாருங்க. Bangalore Startup-ல இருந்து Chennai Product Company வரைக்கும், எல்லா Job Post-லயும் ஒரு வரி கண்டிப்பா இருக்கும் - 'Experience with TypeScript preferred' அப்படி. இந்த நேரத்துல College முடிச்சி வெளில வரும் Fresher-க்கு JavaScript, கொஞ்சம் React மட்டும் தான் தெரியும். TypeScript-ஐ பார்த்தா, Interview Call வருறதுக்கு முன்னாடியே இன்னொரு Subject படிக்கணும் போல தோணும்.

ஆனா Team-ஸ் ஏன் இத Insist பண்றாங்கன்னு Actual காரணம் சொல்றேன். JavaScript-ல நீங்க எதை வேணும்னாலும் எங்க வேணும்னாலும் Pass பண்ணலாம் - Number வர வேண்டிய இடத்துல String கொடுக்கலாம், Object வர வேண்டிய இடத்துல undefined கொடுக்கலாம். App உடனே Complain பண்ணாது. Production-ல ஒரு User Button Click பண்ணும்போது தான் Crash ஆகும். TypeScript இந்த Mistake-ஐ, நீங்க Type பண்ணிக்கிட்டே இருக்கும்போதே, உங்க Editor-லயே, Code Ship ஆகுறதுக்கு முன்னாடியே காட்டிடும்.

ஒரு Important விஷயம் - TypeScript, JavaScript-ஐ Replace பண்ற Language இல்ல. JS Seatbelt மாட்டிக்கிட்டு இருக்குறதா நினைச்சுக்கோங்க. நீங்க Normal JS Syntax-ஐயே Mostly எழுதுவீங்க, உதவி தேவைப்படற இடத்துல Type Annotation சேர்ப்பீங்க. tsc என்ற Compiler உங்க .ts File-களை Plain .js File-ஆ மாத்தி தரும். Browser-க்கு TypeScript-ஐ பத்தியே தெரியாது, அதுக்கு Output JS மட்டும் தான் தெரியும்.

இது எப்படி வேலை செய்யும்? (அதாவது + உதாரணம்)#

முதல்ல tsc, tsconfig Set Up பண்ணலாம்#

இத Try பண்ண எந்த Fancy Framework-உம் தேவையில்ல. உங்க Laptop-லயே, மூணு Command போதும்.

npm init -y
npm install --save-dev typescript
npx tsc --init

கடைசி Command ஒரு tsconfig.json File-ஐ Generate பண்ணும், அதுல நிறைய Option Comment-ஆ இருக்கும். Clean-ஆ, Strict-ஆ இருக்கிற Config இதோ:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src",
    "esModuleInterop": true
  },
  "include": ["src"]
}

npx tsc Run பண்ணா, src Folder-ல இருக்கிற எல்லா File-ஐயும் படிச்சி, Type Check பண்ணி, dist Folder-ல Plain JavaScript-ஆ போடும். இத உங்க Project-ல ஒரு தடவை Set பண்ணா போதும், அப்புறம் தினமும் இதையே Use பண்ணலாம்.

Types, Inference - Compiler உங்களுக்கு Help பண்ணுறது எப்படி?#

அதாவது, TypeScript-ல எல்லா Variable-க்கும் நீங்களே Type எழுத வேண்டிய அவசியம் இல்ல. Compiler Context-ஐ பார்த்து தானா Guess பண்ணிடும். இதை தான் Type Inference-ன்னு சொல்றாங்க. உதாரணமா இத பாருங்க:

let orderId: number = 1024;
let userName = "Kavitha"; // string-ஆ தானா Infer ஆகும்

function getTotal(price: number, qty: number): number {
  return price * qty;
}

console.log(getTotal(499, 2));

userName-க்கு Type எழுதாம விட்டாலும், TypeScript அதை string-ஆ தானா புரிஞ்சுக்கும். ஆனா Function Parameter-க்கு Type கொடுக்கணும். இல்லைனா Compiler எந்த Type வருமோன்னு தெரியாம Confuse ஆகிடும். getTotal-க்கு price-ஐ String-ஆ கொடுக்க பாத்தீங்கன்னா, Compile ஆகுறதுக்கு முன்னாடியே Error காட்டிடும்.

Interface, Type Alias - எது எப்போ Use பண்ணனும்?#

Interview-ல கண்டிப்பா இந்த Question வரும் - Interface-க்கும் Type Alias-க்கும் என்ன Difference? ரெண்டுமே ஒரு Object எப்படி இருக்கும்னு Describe பண்ணும், ஆனா Behaviour-ல வித்தியாசம் இருக்கு.

interface User {
  id: number;
  name: string;
  isPremium?: boolean;
}

type Address = {
  city: string;
  pincode: string;
};

const dev: User = {
  id: 1,
  name: "Arun",
};

Interface-ஐ பின்னாடி Extend பண்ணலாம், அதே பேருல ரெண்டு தடவை எழுதினா Automatic-ஆ Merge ஆகும் (Declaration Merging). Type Alias Union, Intersection எல்லாம் Easy-ஆ பண்ணும், ஆனா Declaration Merging Support பண்ணாது. React Project-ல Props-க்கு பொதுவா Interface Use பண்றாங்க, Simple Object Shape-க்கு Type Alias போதும்.

Union, Literal Types - Real Use Case பாருங்க#

அதாவது, ஒரு Variable-க்கு Fixed Set-ல இருக்கிற Value மட்டும் வரும்னு சொல்ல வேண்டிய இடம் நிறைய வரும். உதாரணமா, Order Status 'pending' இல்லாட்டி 'shipped' இல்லாட்டி 'delivered' இப்படி சில Value மட்டும் வரும். இதை Union, Literal Types வச்சு Model பண்ணலாம்.

type OrderStatus = "pending" | "shipped" | "delivered" | "cancelled";
type PaymentMode = "UPI" | "CARD" | "COD";

function printStatus(status: OrderStatus): void {
  console.log("Order status:", status);
}

printStatus("shipped");

printStatus Function-க்கு 'returned' அப்படி ஏதாவது Random String Pass பண்ண பாத்தீங்கன்னா, Compiler உடனே Error காட்டிடும். UPI, CARD, COD மாரி Payment Mode-ஐயும் இதே மாரி தான் Represent பண்றாங்க.

இந்தியாவுல / நம்ம Interview-ல இது எங்க Use ஆகுது?#

Flipkart, Swiggy, Zoho, Freshworks மாரி Product Company-ல Frontend-க்கு React + TypeScript Combo Common-ஆ இருக்கும். Backend-க்கு Node + TypeScript Use பண்ணுறதும் அதிகமாகுது. Interview-ல 'Interface vs Type Alias Difference சொல்லு', 'Union Type Example கொடு' அப்படி Direct Question வரலாம், அல்லது ஒரு Small JS Code கொடுத்து 'இத TypeScript-ல Convert பண்ணு' அப்படி Task கொடுப்பாங்க.

இப்போ ஒரு File Migrate பண்ணுறது எப்படின்னு பாருங்க. முழு Project-ஐயும் ஒரே Weekend-ல Rewrite பண்ண வேண்டாம். ஒரு File எடுத்து .js-ஐ .ts-ஆ Rename பண்ணுங்க, tsc Run பண்ணி என்ன Error வருதுன்னு பாருங்க:

// பழைய calc.js
function addTax(amount) {
  return amount + amount * 0.18;
}

// இப்போ calc.ts
function addTax(amount: number): number {
  return amount + amount * 0.18;
}

tsconfig.json-ல allowJs: true வச்சா, .js, .ts ரெண்டு File Type-ஐயும் ஒரே Project-ல வைக்கலாம். ஒரு வாரத்துல ஒரு File, அடுத்த வாரத்துல இன்னொரு File அப்படி மெதுவா Migrate பண்ணினா, Team Work நிறுத்தாமலே Project முழுவதும் TypeScript-க்கு வரும்.

தப்பா பண்ணுற Common Mistakes என்னென்ன?#

any Type-ஐ எல்லா இடத்துலயும் போடுறது தான் முதல் Mistake. அது TypeScript-ஐ Use பண்ணி Type Safety வேணும்-ன்னு சொல்லிட்டு, அதையே Off பண்ணுற மாரி. Strict Mode-ஐ Off பண்ணிட்டு, tsc Error காட்டாத மாரி Suppress பண்றதும் அடுத்த Mistake. Interface, Type Alias ரெண்டையும் ஒரே File-ல Mix பண்ணி Confuse ஆகுறதும் நிறைய பேருக்கு வரும். Union Type Use பண்ணும்போது, switch-ல எல்லா Case-ஐயும் Handle பண்ணாம Default Case Miss பண்றதும் Common தப்பு.

நீங்க இப்போ என்ன பண்ணுங்க?#

உங்க பழைய JS Project-ல ஒரு Small File எடுங்க. அதை .ts-ஆ Rename பண்ணுங்க, npx tsc Run பண்ணி என்ன Error வருதுன்னு பாருங்க. ஒவ்வொரு Error-ஐயும் Type சேர்த்து சரி பண்ணுங்க - இது ஒரு நாள் Practice போதும். இந்த ஒரு Exercise முடிச்சாலே, அடுத்த Interview-ல TypeScript Question வந்தா பயப்பட வேண்டிய அவசியம் இல்ல.

Strict Mode Off பண்ணி Start பண்ணலாமா? Real Team-ல என்ன நடக்கும்?#

புதுசா TypeScript Try பண்ணுறவங்க கிட்ட ஒரு Common Question வரும் - strict: true வச்சா ரொம்ப Error வரும், அதனால Off பண்ணி Start பண்ணலாமா? Chennai-ல ஒரு Mid-Size Product Company-ல இப்படியே பல Team strict: false வச்சி ஆரம்பிச்சு, ஆறு மாசத்துல Codebase முழுக்க any Type நிறைஞ்சி, TypeScript வச்சதே Waste-ஆ ஆன கதை நிறைய கேக்கலாம். strict Mode Off ஆக்கினா, undefined, null Check செய்யாம Code Compile ஆகிடும், ஆனா Production-ல Payment Page Crash ஆகும்போது தான் அந்த Bug தெரியும். அதனால புது Project ஆரம்பிக்கும்போதே strict: true வச்சு Start பண்ணுறது தான் Senior Developer-ங்க கொடுக்குற Advice.

ஆனா Existing பெரிய JS Project-ஐ TypeScript-க்கு Migrate பண்ணும்போது, ஒரு நாளே strict Mode Full-ஆ On பண்ணினா, Hundred-க்கு மேல Error வந்து Team Frustrate ஆகிடும். இதுக்காக tsconfig.json-ல strict: false-ஆ வச்சு, File ஒவ்வொன்றா Migrate பண்ணிக்கிட்டே, ஒரு Stage வந்ததும் strictNullChecks மட்டும் முதல்ல On பண்ணி, அப்புறம் noImplicitAny On பண்ணி, படிப்படியா strict: true-க்கு போறது தான் Real-World-ல நடக்குற Practical Approach. Zoho, Freshworks மாரி Company-ல இப்படி Phase-வைஸ்-ஆ Migrate பண்ணுறதை தான் பல Senior Engineer Interview-லயும் பகிர்ந்துகிறாங்க.

இன்னொரு Mistake என்னன்னா, Team-ல ஒருத்தர் strict Mode On பண்ணி Code எழுதுறார், இன்னொருத்தர் any போட்டு Fast-ஆ Ship பண்ணுறார் - இப்படி Mix ஆனா Benefit முழுசா கிடைக்காது. VS Code-ல Red Underline Error வந்தா, அதை Ignore பண்ணாம, என்ன Type Mismatch-ன்னு படிச்சு புரிஞ்சிக்கிறது தான் முக்கியம். இனிமேல் AI Code Editor-ங்களும் (Copilot மாரி) TypeScript Error-ஐ வச்சே Suggestion கொடுக்குறதால, Type Information Clean-ஆ வைக்குற Team-ஸ் தான் Speed-ஆ Code எழுத முடியும். எளிமையா சொன்னா, strict Mode ஒரு Extra வேலை இல்ல, அது உங்க Future Bug-ஐ இப்பவே பிடிக்குற ஒரு Safety Net.