TypeScript என்றால் என்ன? டெவலப்பர் அல்லாதவர்களுக்கான எளிய வழிகாட்டி

TypeScript என்பது types கொண்ட JavaScript. ஒவ்வொரு மதிப்பும் எந்த வகைத் தரவாக இருக்க வேண்டும் என்று குறிக்கிறீர்கள் — ஓர் எண், சில உரை, ஆர்டர்களின் பட்டியல் — கோடு இயங்குவதற்கு முன்பே TypeScript பொருந்தாமைகளைச் சரிபார்க்கிறது. TypeScript தளம் இதை "types-க்கான தொடரியல் கொண்ட JavaScript" என்று விவரிக்கிறது; சாதாரண JavaScript ஆக மாற்றப்படும்போது types நீக்கப்படும், அந்த JavaScript JavaScript இயங்கும் எங்கும் இயங்கும்.

AI உடன் உருவாக்கும்போது இது ஏன் முக்கியம்

AI மாதிரிகள் வேகமாகக் கோடு எழுதுகின்றன, வேகமான கோட்டில் தவறுகள் இருக்கும்: ஒரு கோப்பில் customerName, இன்னொன்றில் customer_name; எண்ணுக்குப் பதில் உரையாக அனுப்பப்பட்ட விலை; விடுபட்ட மதிப்புடன் அழைக்கப்பட்ட ஒரு function. சாதாரண JavaScript-இல் அந்தத் தவறுகளில் பல, யாராவது தவறான பொத்தானை அழுத்தும்போதுதான் தெரியும்.

TypeScript அவற்றில் பலவற்றை, கோடு எழுதப்படும்போதே முன்கூட்டியே பிடிக்கிறது:

• AI உடனடிப் பின்னூட்டம் பெறுகிறது. வகைப் பிழைகள் தவறான சரியான வரியைச் சுட்டிக்காட்டுகின்றன, அதனால் நீங்கள் பார்ப்பதற்கு முன்பே ஏஜெண்ட் அதைச் சரிசெய்ய முடியும்.
• மாற்றங்கள் பாதுகாப்பானவை. ஒரு புலத்தின் பெயரை மாற்றினால், பழைய பெயரைப் பயன்படுத்தும் ஒவ்வொரு இடத்தையும் TypeScript குறிக்கும்.
• கோடு தன்னை விளக்குகிறது. ஒரு function எதை எதிர்பார்க்கிறது, எதைத் திருப்பித் தருகிறது என்று types ஆவணப்படுத்துகின்றன. இது உங்களுக்கும், AI-க்கும், பின்னர் அதில் வேலை செய்யும் எந்த டெவலப்பருக்கும் உதவுகிறது.
• எடிட்டர்கள் புத்திசாலியாகின்றன. ஒவ்வொரு மதிப்பும் என்னவென்று எடிட்டருக்குத் தெரிவதால் தானாக நிரப்புதலும் "definition-க்குச் செல்" வசதியும் சிறப்பாக வேலை செய்கின்றன.

பல AI ஆப் பில்டர்கள் இயல்பாக TypeScript-ஐப் பயன்படுத்துவதற்கு இதுவே முக்கியக் காரணம்.

அன்றாட உதாரணம்

லேபிள் இட்ட பிரிவுகளுடன் உள்ள ஒரு கிடங்கை நினையுங்கள். ஒவ்வொரு பிரிவிலும் ஒரு பலகை உள்ளது: "பேலட்கள் மட்டும்", "குளிர்சாதனம்", "அதிகபட்சம் 500 kg". ஒரு சரக்கு வரும்போது, வாசலில் இருக்கும் சோதனையாளர் பொருட்களை பலகையுடன் ஒப்பிடுகிறார். உலர் பொருட்கள் பிரிவுக்குச் செல்லவிருந்த உறைந்த மீன் ஒரு வாரம் கழித்து நாற்றம் வரும்போது கண்டுபிடிக்கப்படாமல், வாசலிலேயே தடுக்கப்படுகிறது.

TypeScript என்பது வாசலில் இருக்கும் சோதனையாளர். Types என்பது பலகைகள். பொருட்கள் — உங்கள் கோடு — பயன்பாட்டுக்குள் செல்வதற்கு முன்பே சோதனை நடக்கிறது. எல்லாம் இடத்தில் வந்த பிறகு, பலகைகள் அகற்றப்படுகின்றன: இயங்கும் JavaScript-இல் types எதுவும் மீதமிருக்காது.

TypeScript எப்படி வேலை செய்கிறது

1. நீங்கள் (அல்லது AI) .ts அல்லது .tsx கோப்புகளை எழுதுகிறீர்கள் — type குறிகளுடன் TypeScript.
2. வகைச் சரிபார்ப்பான் கோடைப் படித்து பொருந்தாமைகளை எடிட்டரிலோ build-இலோ பிழைகளாகக் காட்டுகிறது.
3. ஒரு build படி types-ஐ நீக்கி, சாதாரண JavaScript-ஐ உருவாக்குகிறது.
4. JavaScript உலாவியிலோ சேவையகத்திலோ (Node.js, Deno, Bun) இயங்குகிறது.

ஒரு முக்கியமான விளைவு: TypeScript நீங்கள் எழுதிய கோடைச் சரிபார்க்கிறது, ஆப் இயங்கும்போது வரும் தரவை அல்ல. வெளி API ஏதேனும் எதிர்பாராததை அனுப்பினால், இயக்க நேர validation சேர்த்தால் ஒழிய TypeScript அதைப் பார்க்க முடியாது.

ஓர் எடுத்துக்காட்டு: முன்பதிவுப் படிவம்

ஒரு முடி திருத்தகத்திற்கான முன்பதிவு ஆப் உருவாக்குகிறீர்கள் என்று வைத்துக்கொள்ளுங்கள். ஒரு முன்பதிவை விவரிக்கும் type இதோ:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // ? என்றால் விருப்பத்தேர்வு
};

முன்பணத்தைக் கணக்கிடும் ஒரு function:

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

prise ஒரு தெரிந்த பண்பு அல்ல என்றும் price விடுபட்டுள்ளது என்றும் TypeScript அறிவிக்கிறது. சாதாரண JavaScript-இல் இது அமைதியாக NaN (எண் அல்ல) முன்பணத்தைக் கணக்கிட்டிருக்கும்.

தவறான வகை மதிப்பு.

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

எண் எதிர்பார்க்கப்படும் இடத்தில் சரம் பயன்படுத்த முடியாது என்று TypeScript அறிவிக்கிறது. அது இல்லாவிட்டால், "40" * 0.2 தற்செயலாக வேலை செய்யும், ஆனால் "40" + 5 "405" தரும் — விலைப்பட்டியலில் தோன்றும் வகைப் பிழை.

இல்லாத சேவை.

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

அனுமதிக்கப்பட்ட சேவைகளில் "perm" ஒன்றல்ல என்று TypeScript அறிவிக்கிறது. பின்னர் திருத்தகம் perm சேர்த்தால், நீங்கள் அதை type-இல் சேர்க்கிறீர்கள், புதுப்பிக்கப்பட வேண்டிய ஒவ்வொரு இடத்தையும் TypeScript காட்டும் — விலைப் பட்டியல், படிவம், நாட்காட்டி வண்ணங்கள்.

அது பிடிக்க முடியாதவை. முன்பதிவுப் படிவம் உலாவியிலிருந்து சேவையகத்திற்கு price: "40" அனுப்பினால், சேவையகத்தின் TypeScript இயக்க நேரத்தில் அதைப் பார்க்காது. அதனால்தான் நன்கு கட்டப்பட்ட ஆப்கள் வரும் தரவையும் validate செய்கின்றன, பெரும்பாலும் வடிவத்தைச் சரிபார்த்து அதைச் சரியான Booking ஆக மாற்றும் ஒரு validation நூலகத்துடன்.

TypeScript vs JavaScript

பொதுவான சொற்கள் விளக்கம்

பொதுவான தவறுகளும் தவறான கருத்துகளும்

• "TypeScript கோடைப் பிழையற்றதாக்குகிறது." அது தரவு வடிவத்தில் உள்ள பொருந்தாமைகளைப் பிடிக்கும், தவறான தர்க்கத்தை அல்ல. 20%-க்கு பதில் 2% முன்பணம் type-சரிபார்ப்பில் சரியாகத் தேறிவிடும்.
• "Types எனக்கு மோசமான உள்ளீட்டிலிருந்து பாதுகாப்பு தரும்." Types இயக்க நேரத்தில் மறைந்துவிடும். பயனர்கள், படிவங்கள், API-களிலிருந்து வரும் தரவை validate செய்யுங்கள்.
• எல்லா இடத்திலும் any. AI சிக்கும்போது, பிழைகளை மௌனமாக்க any அல்லது // @ts-ignore-ஐ நாடலாம். அது பிரச்சினைகளைச் சரிசெய்யாமல் மறைக்கிறது.
• ஆப் வேலை செய்வதால் type பிழைகளைப் புறக்கணிப்பது. சில கருவிகள் type பிழைகள் உள்ள கோடையும் இயக்கும். அந்தப் பிழைகள் இன்னும் நிகழவிருக்கும் பிரச்சினைகளே.
• "TypeScript மெதுவானது." இயங்குவதற்கு முன் types நீக்கப்படுகின்றன; இயங்கும் JavaScript கிட்டத்தட்ட அதேதான்.
• "இது பெரிய குழுக்களுக்கு மட்டுமே." தனியாக உருவாக்குபவர்களும் பயனடைவார்கள், குறிப்பாக பெரும்பாலான மாற்றங்களை AI செய்யும்போது.

உங்கள் AI பில்டரிடம் என்ன கேட்பது

• "TypeScript-ஐ strict mode இயக்கத்தில் பயன்படுத்தவும்."
• "நம் முக்கியப் பதிவுகளுக்குப் பகிரப்பட்ட types வரையறுக்கவும் — Customer, Booking, Invoice — அவற்றை frontend மற்றும் backend இரண்டிலும் பயன்படுத்தவும்."
• "பிழைகளைத் தாண்டிச் செல்ல any அல்லது @ts-ignore-ஐப் பயன்படுத்த வேண்டாம்; அடிப்படைப் பிரச்சினையைச் சரிசெய்து அது என்னவென்று சொல்லவும்."
• "வரும் எல்லாத் தரவையும் சேவையகத்தில் validate செய்யவும், types மட்டும் போதாது."
• "வகைச் சரிபார்ப்பானை இயக்கி, முடிந்ததாகச் சொல்வதற்கு முன் ஒவ்வொரு பிழையையும் சரிசெய்யவும்."
• "ஒரு புலத்தின் பெயரை மாற்றினால், TypeScript குறிக்கும் ஒவ்வொரு இடத்தையும் புதுப்பிக்கவும்."
• "இந்த type பிழையை எளிய ஆங்கிலத்தில் விளக்கவும்."

AI உருவாக்கியதைச் சரிபார்ப்பது பற்றி மேலும் அறிய, AI உருவாக்கிய கோடை எப்படி மதிப்பாய்வு செய்வது மற்றும் AI மூலம் கட்டப்பட்ட ஆப்பில் பிழைகளை எப்படி நீக்குவது பார்க்கவும்.

Mythex-இல் TypeScript

நீங்கள் குறிப்பாக எதுவும் கேட்காவிட்டால், Mythex புதிய திட்டங்களை Vite + React + TypeScript + Tailwind மீது தொடங்குகிறது. கோட் எடிட்டரில் மொழி அறிவு உள்ளது — TypeScript மற்றும் JavaScript உட்பட பல மொழிகளுக்கு தானாக நிரப்புதல், கண்டறிதல்கள், definition-க்குச் செல்லுதல் — எனவே type பிழைகள் Preview-இல் மட்டுமல்லாமல் கோடிலும் தெரியும். எடிட்டர் Free-இல் படிக்க மட்டும், Pro-இல் முழுமையாகத் திருத்தக்கூடியது. முதல் prompt-இல் வேறு அமைப்பு கேட்கலாம்; தொழில்நுட்பம் எப்படித் தேர்வாகிறது என்ற docs பக்கம் அதை விளக்குகிறது, எடிட்டர் என்ன காட்டுகிறது என்பதை கோட் எடிட்டர் docs விளக்குகிறது.

கேள்விகள்