Kas ir TypeScript? Vienkārša rokasgrāmata bez programmēšanas zināšanām

TypeScript ir JavaScript ar tipiem. Jūs pievienojat iezīmes, kas norāda, kāda veida datiem katrai vērtībai jābūt — skaitlim, tekstam, pasūtījumu sarakstam —, un TypeScript pārbauda jūsu kodu, vai nav neatbilstību, pirms tas vispār tiek palaists. TypeScript vietne to apraksta kā „JavaScript ar sintaksi tipiem”; tipi tiek noņemti, kad kods tiek pārvērsts parastā JavaScript, kas pēc tam darbojas visur, kur darbojas JavaScript.

Kāpēc tas ir svarīgi, veidojot ar AI

AI modeļi raksta kodu ātri, bet ātrs kods satur kļūdas: lauks customerName vienā failā un customer_name citā, cena nodota kā teksts, nevis skaitlis, funkcija izsaukta bez vērtības. Parastā JavaScript daudzas no šīm kļūdām parādās tikai tad, kad kāds noklikšķina uz nepareizās pogas.

TypeScript daudzas no tām notver agrāk — kamēr kods tiek rakstīts:

• AI saņem tūlītēju atgriezenisko saiti. Tipu kļūdas norāda tieši uz nepareizo rindu, tāpēc aģents to var salabot, pirms jūs to redzat.
• Izmaiņas ir drošākas. Pārdēvējiet lauku, un TypeScript atzīmē katru vietu, kur vēl tiek izmantots vecais nosaukums.
• Kods pats sevi paskaidro. Tipi dokumentē, ko funkcija sagaida un atgriež, kas noderēs jums, AI un jebkuram izstrādātājam, kas to vēlāk strādās.
• Redaktori kļūst gudrāki. Automātiskā pabeigšana un „iet uz definīciju” darbojas labāk, jo redaktors zina, kas ir katra vērtība.

Tas ir liels iemesls, kāpēc daudzi AI lietotņu veidotāji pēc noklusējuma izvēlas TypeScript.

Ikdienas salīdzinājums

Padomājiet par preču noliktavu ar iezīmētām nodalījumu zonām. Katrai zonai ir zīme: „Tikai paletes”, „Dzesējamās preces”, „Maks. 500 kg”. Kad ierodas piegāde, pie durvīm pārbaudītājs salīdzina preces ar zīmi. Saldēta zivs, kas paredzēta sausās preču zonai, tiek apturēta pie durvīm, nevis atklāta nedēļu vēlāk, kad jau smaka.

TypeScript ir pārbaudītājs pie durvīm. Tipi ir zīmes. Pārbaude notiek pirms tam, kad preces — jūsu kods — tiek nodotas lietošanā. Un, kad viss ir savā vietā, zīmes tiek noņemtas: darbojošajā JavaScript vairs nav neviena tipa.

Kā darbojas TypeScript

1. Jūs (vai AI) rakstāt .ts vai .tsx failus — TypeScript ar tipu iezīmēm.
2. Tipu pārbaudītājs nolasa kodu un ziņo par neatbilstībām kā kļūdām redaktorā vai būvēšanā.
3. Būvēšanas solis noņem tipus, ģenerējot parastu JavaScript.
4. JavaScript darbojas pārlūkprogrammā vai serverī (Node.js, Deno, Bun).

Svarīgas sekas: TypeScript pārbauda kodu, ko uzrakstījāt, nevis datus, kas nonāk, kamēr lietotne darbojas. Ja ārējais API atsūta kaut ko negaidītu, TypeScript to neredz, kamēr nepievienojat validāciju izpildes laikā.

Darba piemērs: rezervācijas veidlapa

Pieņemsim, ka veidojat rezervāciju lietotni frizētavai. Šeit ir tipa apraksts rezervācijai:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // ? nozīmē, ka lauks nav obligāts
};

Un funkcija, kas aprēķina depozītu:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

Tagad paskatieties, ko TypeScript notver.

Nepareizi uzrakstīts lauks.

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript ziņo, ka prise nav zināma īpašība un price trūkst. Parastā JavaScript tas klusi aprēķinātu depozītu NaN (nav skaitlis).

Nepareizs vērtības veids.

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

TypeScript ziņo, ka tekstu nevar izmantot tur, kur gaidīts skaitlis. Bez tā "40" * 0.2 gadījumā nostrādā, bet "40" + 5 dod "405" — tāda veida kļūda, kas parādās rēķinā.

Pakalpojums, kas neeksistē.

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

TypeScript ziņo, ka "perm" nav atļauts pakalpojums. Kad frizētava vēlāk pievieno jaunu pakalpojumu, jūs to pievienojat tipā, un TypeScript parāda katru vietu, kurai jāatjaunina — cenu saraksts, veidlapa, kalendāra krāsas.

Ko tas nevar notvert. Ja rezervācijas veidlapa no pārlūkprogrammas uz serveri nosūta price: "40", serverī TypeScript to izpildes laikā neredz. Tāpēc labi veidotas lietotnes arī validē ienākošos datus, bieži ar validācijas bibliotēku, kas pārbauda struktūru un pārvērš to pareizā Booking.

TypeScript pret JavaScript

Biežāk lietoti termini

Biežākās kļūdas un nepareizi priekšstati

• „TypeScript padara kodu bez kļūdām.” Tas notver neatbilstības datu formā, nevis nepareizu loģiku. 2% depozīts 20% vietā tipu pārbaudi iztur.
• „Tipi pasargā mani no nepareiziem ievades datiem.” Tipi izpildes laikā pazūd. Validējiet datus no lietotājiem, veidlapām un API.
• any visur. Kad AI iestrēgst, tas var pieķerties pie any vai // @ts-ignore, lai apklusinātu kļūdas. Tas slēpj problēmas, nevis tās novērš.
• Tipu kļūdu ignorēšana, jo priekšskatījums darbojas. Daži rīki joprojām palaiž kodu ar tipu kļūdām. Kļūdas joprojām ir kļūdas, kas gaida, lai notiktu.
• „TypeScript ir lēnāks.” Tipi tiek noņemti pirms palaišanas; darbojošais JavaScript ir būtībā tāds pats.
• „Tas ir tikai lielām komandām.” Arī vienas personas veidotāji gūst labumu, īpaši, ja lielāko daļu izmaiņu veic AI.

Ko prasīt no sava AI veidotāja

• „Izmantojiet TypeScript ar ieslēgtu stingro režīmu.”
• „Definējiet kopīgus tipus mūsu galvenajiem ierakstiem — Customer, Booking, Invoice — un izmantojiet tos gan priekšpusē, gan aizmugurē.”
• „Neizmantojiet any vai @ts-ignore, lai apietu kļūdas; labojiet pamatproblēmu un pastāstiet, kas tā bija.”
• „Validējiet visus ienākošos datus serverī, ne tikai ar tipiem.”
• „Palaidiet tipu pārbaudītāju un izlabojiet katru kļūdu, pirms paziņojat, ka tas ir gatavs.”
• „Kad pārdēvējat lauku, atjauniniet katru vietu, ko TypeScript atzīmē.”
• „Paskaidrojiet šo tipu kļūdu vienkāršā valodā.”

Lai uzzinātu vairāk par AI radītā rezultāta pārbaudi, skatiet kā pārskatīt AI ģenerētu kodu un kā atkļūdot ar AI veidotu lietotni.

TypeScript Mythex

Ja neprasāt kaut ko konkrētu, Mythex jaunus projektus sāk ar Vite + React + TypeScript + Tailwind. Koda redaktorā ir valodas atbalsts — pabeigšana, diagnostika un iešana uz definīciju TypeScript un JavaScript un citām valodām —, tāpēc tipu kļūdas ir redzamas kodā, nevis tikai priekšskatījumā. Redaktors Free plānā ir tikai lasāms, bet Pro plānā pilnībā rediģējams. Pirmajā uzvednē joprojām varat prasīt citu iestatījumu; dokumentācijas lapa par kā tiek izvēlēts tehnoloģiju steks paskaidro, kā, un koda redaktora dokumentācija apraksta, ko redaktors parāda.

Jautājumi