എന്താണ് 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 അപ്രതീക്ഷിതമായ എന്തെങ്കിലും തിരികെ അയച്ചാൽ, റൺടൈം വാലിഡേഷൻ ചേർക്കാതെ 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 });

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 റിപ്പോർട്ട് ചെയ്യുന്നു. സലൂൺ പിന്നീട് perms ചേർക്കുമ്പോൾ, അത് ടൈപ്പിൽ ചേർക്കുന്നു, കൂടാതെ അപ്‌ഡേറ്റ് ചെയ്യേണ്ട എല്ലായിടവും TypeScript കാണിക്കുന്നു — വില പട്ടിക, ഫോം, കലണ്ടർ നിറങ്ങൾ.

അത് പിടിക്കാൻ കഴിയാത്തത്. ബുക്കിംഗ് ഫോം ബ്രൗസറിൽ നിന്ന് price: "40" സെർവറിലേക്ക് അയച്ചാൽ, റൺടൈമിൽ സെർവറിലെ TypeScript അത് കാണില്ല. അതുകൊണ്ടാണ് നന്നായി നിർമ്മിച്ച ആപ്പുകൾ വരുന്ന ഡാറ്റയും വാലിഡേറ്റ് ചെയ്യുന്നത്, പലപ്പോഴും ഘടന പരിശോധിച്ച് അതിനെ ശരിയായ Booking ആക്കി മാറ്റുന്ന ഒരു വാലിഡേഷൻ ലൈബ്രറി ഉപയോഗിച്ച്.

TypeScript vs JavaScript

പദങ്ങളുടെ വിശദീകരണം

സാധാരണ തെറ്റുകളും തെറ്റിദ്ധാരണകളും

• "TypeScript കോഡിനെ ബഗ് രഹിതമാക്കുന്നു." ഇത് ഡാറ്റാ ഘടനയിലെ പൊരുത്തക്കേടുകൾ പിടിക്കുന്നു, തെറ്റായ ലോജിക് അല്ല. 20%-ന് പകരം 2% ഡെപ്പോസിറ്റ് ആണെങ്കിലും ടൈപ്പ് പരിശോധന കടന്നുപോകും.
• "ടൈപ്പുകൾ തെറ്റായ ഇൻപുട്ടിൽ നിന്ന് എന്നെ സംരക്ഷിക്കുന്നു." റൺടൈമിൽ ടൈപ്പുകൾ ഇല്ലാതാകുന്നു. ഉപയോക്താക്കളിൽ നിന്നും ഫോമുകളിൽ നിന്നും API-കളിൽ നിന്നുമുള്ള ഡാറ്റ വാലിഡേറ്റ് ചെയ്യുക.
• എല്ലായിടത്തും any. AI കുടുങ്ങുമ്പോൾ പിശകുകൾ നിശബ്ദമാക്കാൻ any അല്ലെങ്കിൽ // @ts-ignore എടുത്തേക്കാം. അത് പ്രശ്നം പരിഹരിക്കുന്നതിന് പകരം മറയ്ക്കുന്നു.
• പ്രിവ്യൂ പ്രവർത്തിക്കുന്നതുകൊണ്ട് ടൈപ്പ് പിശകുകൾ അവഗണിക്കുന്നത്. ചില ടൂളുകൾ ടൈപ്പ് പിശകുകളുള്ള കോഡും പ്രവർത്തിപ്പിക്കും. ആ പിശകുകൾ ഇപ്പോഴും കാത്തിരിക്കുന്ന ബഗുകളാണ്.
• "TypeScript വേഗം കുറഞ്ഞതാണ്." പ്രവർത്തിപ്പിക്കുന്നതിന് മുമ്പ് ടൈപ്പുകൾ നീക്കം ചെയ്യപ്പെടുന്നു; പ്രവർത്തിക്കുന്ന JavaScript ഏതാണ്ട് ഒന്നുതന്നെയാണ്.
• "ഇത് വലിയ ടീമുകൾക്ക് മാത്രമാണ്." ഒറ്റയ്ക്ക് നിർമ്മിക്കുന്നവർക്കും പ്രയോജനമുണ്ട്, പ്രത്യേകിച്ച് മിക്ക എഡിറ്റുകളും AI ചെയ്യുമ്പോൾ.

AI ബിൽഡറോട് എന്ത് ചോദിക്കണം

• "Strict mode ഓണാക്കി TypeScript ഉപയോഗിക്കുക."
• "Customer, Booking, Invoice പോലുള്ള ഞങ്ങളുടെ പ്രധാന രേഖകൾക്ക് പങ്കിട്ട ടൈപ്പുകൾ നിർവചിച്ച് ഫ്രണ്ടെൻഡിലും ബാക്കെൻഡിലും ഉപയോഗിക്കുക."
• "പിശകുകൾ മറികടക്കാൻ any അല്ലെങ്കിൽ @ts-ignore ഉപയോഗിക്കരുത്; അടിസ്ഥാന പ്രശ്നം പരിഹരിച്ച് അത് എന്തായിരുന്നു എന്ന് പറയുക."
• "ടൈപ്പുകൾക്ക് പുറമേ, സെർവറിൽ എല്ലാ വരുന്ന ഡാറ്റയും വാലിഡേറ്റ് ചെയ്യുക."
• "പൂർത്തിയായി എന്ന് പറയുന്നതിന് മുമ്പ് ടൈപ്പ് ചെക്കർ പ്രവർത്തിപ്പിച്ച് എല്ലാ പിശകുകളും ശരിയാക്കുക."
• "ഒരു ഫീൽഡിന്റെ പേര് മാറ്റുമ്പോൾ, TypeScript ചൂണ്ടിക്കാണിക്കുന്ന എല്ലായിടവും അപ്‌ഡേറ്റ് ചെയ്യുക."
• "ഈ ടൈപ്പ് പിശക് ലളിതമായ ഇംഗ്ലീഷിൽ വിശദീകരിക്കുക."

AI സൃഷ്ടിച്ചതിനെ പരിശോധിക്കുന്നതിനെക്കുറിച്ച് കൂടുതലറിയാൻ, AI സൃഷ്ടിച്ച കോഡ് എങ്ങനെ അവലോകനം ചെയ്യാം, AI-നിർമ്മിത ആപ്പിലെ ബഗുകൾ എങ്ങനെ ഡീബഗ് ചെയ്യാം എന്നിവ കാണുക.

Mythex-ലെ TypeScript

നിങ്ങൾ പ്രത്യേകമായി ഒന്നും ആവശ്യപ്പെടാത്തപ്പോൾ, Mythex പുതിയ പ്രോജക്റ്റുകൾ Vite + React + TypeScript + Tailwind എന്ന സ്റ്റാക്കിൽ തുടങ്ങുന്നു. കോഡ് എഡിറ്ററിൽ ഭാഷാ ബുദ്ധി ഉൾപ്പെടുന്നു — TypeScript-നും JavaScript-നും മറ്റ് ചില ഭാഷകൾക്കും കംപ്ലീഷനുകൾ, ഡയഗ്നോസ്റ്റിക്സ്, definition-ലേക്ക് പോകൽ — അതിനാൽ ടൈപ്പ് പിശകുകൾ പ്രിവ്യൂവിൽ മാത്രമല്ല, കോഡിലും കാണാം. Free-ൽ എഡിറ്റർ വായിക്കാൻ മാത്രമാണ്, Pro-ൽ പൂർണ്ണമായും എഡിറ്റ് ചെയ്യാം. ആദ്യ പ്രോംപ്റ്റിൽ മറ്റൊരു സജ്ജീകരണം ആവശ്യപ്പെടാം; സാങ്കേതികവിദ്യ എങ്ങനെ തിരഞ്ഞെടുക്കുന്നു എന്ന ഡോക്സ് പേജ് വിശദീകരിക്കുന്നു, എഡിറ്റർ എന്ത് കാണിക്കുന്നു എന്നത് കോഡ് എഡിറ്റർ ഡോക്സ് വിവരിക്കുന്നു.

ചോദ്യങ്ങൾ