Kaj je TypeScript? Vodnik v preprostem jeziku za nestrokovnjake

TypeScript je JavaScript s tipi. Dodate oznake, ki povedo, kakšna vrsta podatkov naj bo vsaka vrednost – število, besedilo, seznam naročil –, TypeScript pa kodo pred zagonom preveri glede neskladij. Spletna stran TypeScripta ga opisuje kot »JavaScript s sintakso za tipe«; tipi se ob pretvorbi v navaden JavaScript odstranijo, ta pa deluje povsod, kjer deluje JavaScript.

Zakaj je to pomembno, ko gradite z AI

Modeli AI pišejo kodo hitro, hitra koda pa vsebuje napake: polje customerName v eni datoteki in customer_name v drugi, cena, poslana kot besedilo namesto številke, funkcija, klicana brez ene vrednosti. V običajnem JavaScriptu se mnoge od teh napak pokažejo šele, ko nekdo klikne napačen gumb.

TypeScript jih mnoge ujame prej, med pisanjem kode:

• AI takoj dobi povratno informacijo. Napake pri tipih kažejo na točno vrstico, ki je napačna, zato jo lahko agent popravi, preden jo vidite vi.
• Spremembe so varnejše. Če preimenujete polje, TypeScript označi vsako mesto, ki še vedno uporablja staro ime.
• Koda sama sebe pojasnjuje. Tipi dokumentirajo, kaj funkcija pričakuje in vrača, kar koristi vam, AI-ju in vsakemu razvijalcu, ki bo kasneje delal na njej.
• Urejevalniki so pametnejši. Samodokončevanje in »pojdi na definicijo« delujeta bolje, ker urejevalnik ve, kaj je vsaka vrednost.

Zato mnogi AI graditelji aplikacij privzeto uporabljajo TypeScript.

Vsakdanja primerjava

Pomislite na skladišče s označenimi oddelki. Vsak oddelek ima tablo: »Samo palete«, »Hladilnica«, »Največ 500 kg«. Ko pride dobava, preverjalec pri vratih primerja blago s tablo. Zamrznjena riba, namenjena oddelku za suho blago, se ustavi pri vratih, ne pa šele teden dni pozneje, ko začne smrdeti.

TypeScript je preverjalec pri vratih. Tipi so table. Preverjanje poteka, preden blago – vaša koda – gre v uporabo. In ko je vse na mestu, se table odstranijo: teče JavaScript, v katerem tipov ni več.

Kako deluje TypeScript

1. Vi (ali AI) pišete datoteke .ts ali .tsx – TypeScript s tipskimi oznakami.
2. Preverjalnik tipov prebere kodo in neskladja javi kot napake v urejevalniku ali pri gradnji.
3. Korak gradnje odstrani tipe in ustvari navaden JavaScript.
4. JavaScript se izvaja v brskalniku ali na strežniku (Node.js, Deno, Bun).

Pomembna posledica: TypeScript preverja kodo, ki ste jo napisali, ne pa podatkov, ki pridejo med delovanjem aplikacije. Če zunanji API vrne nekaj nepričakovanega, tega TypeScript ne vidi, razen če dodate preverjanje med izvajanjem (runtime validation).

Delovni primer: obrazec za rezervacije

Recimo, da gradite aplikacijo za rezervacije v frizerskem salonu. Tukaj je tip, ki opisuje rezervacijo:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // ? pomeni, da je neobvezno
};

In funkcija, ki izračuna polog:

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

Poglejte, kaj TypeScript ujame.

Napačno zapisano polje.

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

TypeScript javi, da prise ni znano polje in da manjka price. V navadnem JavaScriptu bi tiho izračunal pologa NaN (ni število).

Napačna vrsta vrednosti.

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

TypeScript javi, da niz ne more biti tam, kjer se pričakuje število. Brez njega "40" * 0.2 slučajno deluje, "40" + 5 pa da "405" – vrsta napake, ki se pokaže na računu.

Storitev, ki ne obstaja.

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

TypeScript javi, da "perm" ni med dovoljenimi storitvami. Ko salon pozneje doda trajne (perm), to dodate v tip, TypeScript pa pokaže vsako mesto, ki jo mora posodobiti – cenik, obrazec, barve v koledarju.

Česa ne more ujeti. Če obrazec za rezervacije z brskalnika pošlje price: "40" na strežnik, TypeScript na strežniku tega med izvajanjem ne vidi. Zato dobro narejene aplikacije preverijo tudi prihajajoče podatke, pogosto z validacijsko knjižnico, ki preveri obliko in jo pretvori v pravilen Booking.

TypeScript proti JavaScriptu

Pogosti izrazi, razloženi

Pogoste napake in zmote

• »TypeScript naredi kodo brez napak.« Ujame neskladja v obliki podatkov, ne v logiki. Pologa 2 % namesto 20 % bo tipsko pravilen.
• »Tipi me varujejo pred slabimi vnosi.« Tipi izginejo med izvajanjem. Preverjajte podatke iz uporabniških obrazcev in API-jev.
• any povsod. Ko se AI zatakne, lahko seže po any ali // @ts-ignore, da utiša napake. To skrije težave namesto da bi jih odpravilo.
• Ignoriranje napak tipov, ker predogled deluje. Nekatera orodja še vedno zaženejo kodo z napakami tipov. Te napake so še vedno hrošči, ki čakajo, da se zgodijo.
• »TypeScript je počasnejši.« Tipi se odstranijo pred zagonom; JavaScript, ki teče, je v bistvu enak.
• »Samo za velike ekipe je.« Tudi samostojni graditelji imajo koristi, zlasti kadar večino sprememb naredi AI.

Kaj zahtevati od AI graditelja

• „Uporabi TypeScript z vključenim strogim načinom.“
• „Določi skupne tipe za glavne zapise – Customer, Booking, Invoice – in jih uporabi tako v frontendu kot v backendu.“
• „Ne uporabljaj any ali @ts-ignore, da bi preskočil napake; odpravi osnovni problem in mi povej, kaj je bil.“
• „Preveri vse prihajajoče podatke na strežniku, ne le s tipi.“
• „Zaženi preverjalnik tipov in popravi vse napake, preden poročaš, da je končano.“
• „Ko preimenuješ polje, posodobi vsako mesto, ki ga TypeScript označi.“
• „Razloži to napako tipa v preprostem jeziku.“

Za več o preverjanju tega, kar je ustvaril AI, glejte kako pregledati kodo, ustvarjeno z AI in kako odpraviti napake v aplikaciji, zgrajeni z AI.

TypeScript v Mythexu

Kadar ne zahtevate ničesar posebnega, Mythex nove projekte začne na Vite + React + TypeScript + Tailwind. Urejevalnik kode vključuje jezikovno inteligenco – dokončevanje, diagnostiko in skok na definicijo za TypeScript in JavaScript ter druge jezike –, zato so napake tipov vidne v kodi, ne le v predogledu. Urejevalnik je na Free samo za branje, na Pro pa v celoti urejljiv. Kakšno drugačno nastavitev lahko še vedno zahtevate v prvem pozivu; stran dokumentacije o tem, kako se izbere sklad, pojasni postopek, dokumentacija o urejevalniku kode pa opiše, kaj urejevalnik prikazuje.

Vprašanja