TypeScript అంటే ఏమిటి? ప్రారంభకుల కోసం సులభ గైడ్

TypeScript అంటే రకాలతో కూడిన JavaScript. ప్రతి విలువ ఏ రకమైన డేటా అయి ఉండాలో — ఒక సంఖ్య, కొంత వచనం, ఆర్డర్‌ల జాబితా — మీరు లేబుల్ చేస్తారు, మరియు TypeScript కోడ్ రన్ అవ్వకముందే తేడాలను తనిఖీ చేస్తుంది. TypeScript సైట్ దీన్ని "రకాల కోసం సింటాక్స్‌తో JavaScript" అని వివరిస్తుంది; సాధారణ JavaScriptగా మార్చినప్పుడు రకాలు తొలగించబడతాయి, ఆ తర్వాత JavaScript ఎక్కడ నడుస్తుందో అక్కడ నడుస్తుంది.

AI తో నిర్మించేటప్పుడు ఇది ఎందుకు ముఖ్యం

AI మోడళ్లు కోడ్‌ను వేగంగా రాస్తాయి, మరియు వేగవంతమైన కోడ్‌లో తప్పులు ఉంటాయి: ఒక ఫైల్‌లో customerName, మరొక ఫైల్‌లో customer_name; ధర సంఖ్యకు బదులు వచనంగా పంపడం; లేదా ఒక ఫంక్షన్‌ను విలువ లేకుండా పిలవడం. సాధారణ JavaScriptలో, ఆ తప్పుల్లో చాలావి ఎవరైనా తప్పు బటన్ నొక్కినప్పుడు మాత్రమే కనిపిస్తాయి.

TypeScript వాటిలో చాలావాటిని కోడ్ రాస్తున్నప్పుడే, ముందుగానే పట్టుకుంటుంది:

• AIకి తక్షణ అభిప్రాయం లభిస్తుంది. రకం లోపాలు తప్పు ఉన్న ఖచ్చితమైన లైన్‌ను చూపుతాయి, కాబట్టి ఏజెంట్ మీరు చూడకముందే దాన్ని సరిచేయగలదు.
• మార్పులు సురక్షితంగా ఉంటాయి. ఒక ఫీల్డ్ పేరు మార్చితే, పాత పేరు ఇంకా వాడే ప్రతి చోటునూ TypeScript గుర్తిస్తుంది.
• కోడ్ తనను తాను వివరిస్తుంది. రకాలు ఒక ఫంక్షన్ ఏమి ఆశిస్తుందో మరియు ఏమి తిరిగి ఇస్తుందో డాక్యుమెంట్ చేస్తాయి, ఇది మీకు, AIకి మరియు తర్వాత దానిపై పనిచేసే ఏ డెవలపర్‌కైనా సహాయపడుతుంది.
• ఎడిటర్‌లు తెలివిగా ఉంటాయి. ప్రతి విలువ ఏమిటో ఎడిటర్‌కు తెలుసు కాబట్టి ఆటో-కంప్లీట్ మరియు "definitionకు వెళ్ళు" బాగా పనిచేస్తాయి.

అనేక AI యాప్ బిల్డర్లు TypeScriptను డిఫాల్ట్‌గా ఎంచుకోవడానికి ఇది ఒక పెద్ద కారణం.

రోజువారీ ఉదాహరణ

లేబుల్ చేసిన బేలతో ఉన్న షిప్పింగ్ గిడ్డంగిని ఊహించుకోండి. ప్రతి బేకు ఒక బోర్డు ఉంటుంది: "పాలెట్‌లు మాత్రమే", "శీతలీకరించినవి", "గరిష్టంగా 500 కిలోలు". సరుకు వచ్చినప్పుడు, ద్వారం వద్ద ఉన్న తనిఖీదారు సరుకును బోర్డుతో పోలుస్తాడు. ఫ్రోజెన్ చేపలు డ్రై-గూడ్స్ బేకు వెళ్తుంటే, అది వారం తర్వాత దుర్వాసన వచ్చినప్పుడు కాదు — ద్వారం వద్దే ఆగిపోతుంది.

TypeScript ఆ ద్వారం వద్ద ఉన్న తనిఖీదారు. రకాలు ఆ బోర్డులు. తనిఖీ సరుకు — మీ కోడ్ — ఉపయోగంలోకి వెళ్ళే ముందు జరుగుతుంది. మరియు అన్నీ సరిగ్గా ఉన్న తర్వాత, బోర్డులు తీసేస్తారు: రన్ అవుతున్న JavaScriptలో ఇక రకాలు మిగలవు.

TypeScript ఎలా పనిచేస్తుంది

1. మీరు (లేదా AI) .ts లేదా .tsx ఫైళ్లు రాస్తారు — రకం లేబుల్‌లతో కూడిన TypeScript.
2. రకం తనిఖీదారు కోడ్‌ను చదివి తేడాలను ఎడిటర్‌లో లేదా బిల్డ్‌లో లోపాలుగా చూపిస్తుంది.
3. బిల్డ్ దశ రకాలను తొలగిస్తుంది, సాధారణ JavaScriptను ఉత్పత్తి చేస్తుంది.
4. JavaScript బ్రౌజర్‌లో లేదా సర్వర్‌లో (Node.js, Deno, Bun) నడుస్తుంది.

ఒక ముఖ్యమైన పరిణామం: TypeScript మీరు రాసిన కోడ్‌ను తనిఖీ చేస్తుంది, యాప్ నడుస్తున్నప్పుడు వచ్చే డేటాను కాదు. ఒక బయటి API ఊహించని దాన్ని తిరిగి పంపితే, మీరు రన్‌టైమ్ validation జోడించకపోతే TypeScript దాన్ని చూడలేదు.

ఒక ఉదాహరణ: బుకింగ్ ఫారం

మీరు ఒక హెయిర్ సెలూన్ కోసం బుకింగ్ యాప్ నిర్మిస్తున్నారని అనుకుందాం. బుకింగ్‌ను వివరించే ఒక రకం ఇది:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // the ? means optional
};

మరియు డిపాజిట్ లెక్కించే ఒక ఫంక్షన్:

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" };

"perm" అనుమతించబడిన సేవలలో ఒకటి కాదని TypeScript చెబుతుంది. సెలూన్ తర్వాత perms జోడిస్తే, మీరు దాన్ని రకంలో చేరుస్తారు, మరియు TypeScript అప్‌డేట్ చేయాల్సిన ప్రతి చోటునూ చూపుతుంది — ధరల జాబితా, ఫారం, క్యాలెండర్ రంగులు.

ఇది పట్టుకోలేనిది. బుకింగ్ ఫారం బ్రౌజర్ నుండి సర్వర్‌కు price: "40" పంపితే, సర్వర్‌పై TypeScript దాన్ని రన్‌టైమ్‌లో చూడదు. అందుకే బాగా నిర్మించిన యాప్‌లు ఇన్‌కమింగ్ డేటాను కూడా validate చేస్తాయి, తరచుగా ఒక validation లైబ్రరీతో, అది ఆకారాన్ని తనిఖీ చేసి సరైన Bookingగా మారుస్తుంది.

TypeScript vs JavaScript

సాధారణ పదాలు వివరించబడ్డాయి

సాధారణ తప్పులు మరియు అపోహలు

• "TypeScript కోడ్‌ను బగ్-రహితంగా చేస్తుంది." ఇది డేటా ఆకారంలో తేడాలను పట్టుకుంటుంది, తప్పు లాజిక్‌ను కాదు. 20% బదులు 2% డిపాజిట్ రకం తనిఖీలో సరిగ్గా సరిపోతుంది.
• "రకాలు తప్పు ఇన్‌పుట్ నుండి నన్ను కాపాడతాయి." రన్‌టైమ్‌లో రకాలు అదృశ్యమవుతాయి. వినియోగదారుల, ఫారాల మరియు APIల నుండి వచ్చే డేటాను validate చేయండి.
• అన్నిచోట్లా any. AI చిక్కుకున్నప్పుడు, లోపాలను మూసివేయడానికి any లేదా // @ts-ignore వైపు వెళ్ళవచ్చు. అది సమస్యలను పరిష్కరించడానికి బదులు దాచిపెడుతుంది.
• ప్రివ్యూ పనిచేస్తోందని రకం లోపాలను విస్మరించడం. కొన్ని టూల్స్ రకం లోపాలున్న కోడ్‌ను కూడా నడుపుతాయి. ఆ లోపాలు ఇంకా భవిష్యత్ బగ్‌లే.
• "TypeScript నెమ్మదిగా ఉంటుంది." నడపడానికి ముందే రకాలు తొలగించబడతాయి; నడిచే JavaScript దాదాపు ఒకటే.
• "ఇది పెద్ద టీమ్‌ల కోసమే." AI ఎక్కువ మార్పులు చేస్తున్నప్పుడు ఒంటరి బిల్డర్లు కూడా లాభపడతారు.

మీ AI బిల్డర్‌ను ఏమి అడగాలి

• "TypeScriptను strict mode ఆన్ చేసి ఉపయోగించండి."
• "మా ప్రధాన రికార్డులకు — Customer, Booking, Invoice — భాగస్వామ్య రకాలను నిర్వచించి, ఫ్రంటెండ్ మరియు బ్యాకెండ్ రెండింటిలోనూ వాడండి."
• "లోపాలను దాటడానికి any లేదా @ts-ignore వాడవద్దు; అసలు సమస్యను సరిచేసి అది ఏమిటో చెప్పండి."
• "సర్వర్‌లో ఇన్‌కమింగ్ డేటాను కేవలం రకాలతో కాకుండా validate చేయండి."
• "పూర్తయిందని చెప్పే ముందు రకం తనిఖీదారును నడిపి ప్రతి లోపాన్ని సరిచేయండి."
• "ఒక ఫీల్డ్ పేరు మార్చినప్పుడు, TypeScript గుర్తించిన ప్రతి చోటునూ అప్‌డేట్ చేయండి."
• "ఈ రకం లోపాన్ని సాధారణ ఇంగ్లీష్‌లో వివరించండి."

AI ఉత్పత్తి చేసిన దాన్ని తనిఖీ చేయడం గురించి మరింత కోసం, AI-జనరేటెడ్ కోడ్‌ను ఎలా సమీక్షించాలి మరియు AI-నిర్మిత యాప్‌ను ఎలా డీబగ్ చేయాలి చూడండి.

Mythex లో TypeScript

మీరు ఏదీ ప్రత్యేకంగా అడగకపోతే, Mythex కొత్త ప్రాజెక్ట్‌లను Vite + React + TypeScript + Tailwindపై ప్రారంభిస్తుంది. కోడ్ ఎడిటర్‌లో భాషా ఇంటెలిజెన్స్ ఉంది — TypeScript మరియు JavaScript కోసం కంప్లీషన్‌లు, డయాగ్నోస్టిక్స్ మరియు definitionకు వెళ్ళడం — కాబట్టి రకం లోపాలు ప్రివ్యూలో మాత్రమే కాకుండా కోడ్‌లో కూడా కనిపిస్తాయి. ఎడిటర్ Freeలో చదవడానికి మాత్రమే, Proలో పూర్తిగా సవరించవచ్చు. మీరు మొదటి ప్రాంప్ట్‌లో వేరే సెటప్ అడగవచ్చు; సాంకేతికత ఎలా ఎంపిక అవుతుందో డాక్స్ పేజీ వివరిస్తుంది, మరియు కోడ్ ఎడిటర్ డాక్స్ ఎడిటర్ ఏమి చూపుతుందో వివరిస్తాయి.

ప్రశ్నలు