Što je TypeScript? Vodič običnim jezikom za neprogramere

TypeScript je JavaScript s tipovima. Dodajete oznake koje govore kakva vrsta podataka svaka vrijednost treba biti — broj, tekst, popis narudžbi — a TypeScript provjerava vaš kod za nepodudarnosti prije nego što se uopće pokrene. TypeScript stranica ga opisuje kao „JavaScript sa sintaksom za tipove“; tipovi se uklanjaju kad se kod pretvori u obični JavaScript, koji onda radi svugdje gdje radi JavaScript.

Zašto je to važno kad gradite uz AI

AI modeli pišu kod brzo, a brzi kod ima greške: polje zvano customerName u jednoj datoteci i customer_name u drugoj, cijena poslana kao tekst umjesto broja, funkcija pozvana bez vrijednosti. U običnom JavaScriptu mnoge od tih grešaka pokažu se tek kad netko klikne pogrešan gumb.

TypeScript mnoge od njih hvata ranije, dok se kod piše:

• AI dobiva trenutnu povratnu informaciju. Greške tipova pokazuju točno koji je redak neispravan, pa agent može popraviti grešku prije nego što je vi vidite.
• Promjene su sigurnije. Preimenujete polje, a TypeScript označi svako mjesto koje još koristi stari naziv.
• Kod objašnjava sam sebe. Tipovi dokumentiraju što funkcija očekuje i što vraća, što pomaže vama, AI-u i svakom programeru koji kasnije radi na tome.
• Uređivači su pametniji. Automatsko dovršavanje i „idi na definiciju“ rade bolje jer uređivač zna što je svaka vrijednost.

Zato mnogi AI graditelji aplikacija zadano koriste TypeScript.

Svakodnevna usporedba

Zamislite skladište s označenim odjeljcima. Svaki odjeljak ima natpis: „Samo paleti“, „Hlađeno“, „Maks. 500 kg“. Kad stigne isporuka, kontrolor na vratima uspoređuje robu s natpisom. Smrznuta riba namijenjena za suhu robu zaustavi se na vratima, a ne otkrije se tjedan dana kasnije kad počne smrdjeti.

TypeScript je kontrolor na vratima. Tipovi su natpisi. Provjera se događa prije nego što roba — vaš kod — uđe u upotrebu. A kad je sve na mjestu, natpisi se skinu: pokrenuti JavaScript više nema tipove.

Kako TypeScript radi

1. Vi (ili AI) pišete .ts ili .tsx datoteke — TypeScript s oznakama tipova.
2. Provjerivač tipova čita kod i prijavljuje nepodudarnosti kao greške u uređivaču ili u izgradnji.
3. Korak izgradnje uklanja tipove i stvara običan JavaScript.
4. JavaScript se izvršava u pregledniku ili na poslužitelju (Node.js, Deno, Bun).

Važna posljedica: TypeScript provjerava kod koji ste napisali, a ne podatke koji stižu dok aplikacija radi. Ako vanjski API vrati nešto neočekivano, TypeScript to ne može vidjeti bez dodavanja validacije u vrijeme izvođenja.

Radni primjer: obrazac za rezervaciju

Recimo da gradite aplikaciju za rezervacije u frizerskom salonu. Evo tipa koji opisuje rezervaciju:

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

I funkcija koja izračunava depozit:

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

Sada pogledajte što TypeScript hvata.

Pogrešno napisano polje.

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

TypeScript prijavljuje da prise nije poznato svojstvo i da price nedostaje. U običnom JavaScriptu ovo bi tiho izračunalo depozit NaN (nije broj).

Pogrešna vrsta vrijednosti.

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

TypeScript prijavljuje da tekst ne može biti tamo gdje se očekuje broj. Bez njega, "40" * 0.2 slučajno radi, ali "40" + 5 daje "405" — greška koja se pokaže na računu.

Usluga koja ne postoji.

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

TypeScript prijavljuje da "perm" nije jedna od dopuštenih usluga. Kad salon kasnije doda trajno ondulanje (perm), dodate ga u tip, a TypeScript pokaže svako mjesto koje treba ažurirati — cjenik, obrazac, boje kalendara.

Što ne može uhvatiti. Ako obrazac za rezervaciju pošalje price: "40" iz preglednika na poslužitelj, TypeScript na poslužitelju to ne vidi u vrijeme izvođenja. Zato dobro izrađene aplikacije također provjeravaju dolazne podatke, često pomoću biblioteke za validaciju koja provjerava oblik i pretvara ih u ispravan Booking.

TypeScript naspram JavaScripta

Uobičajeni pojmovi objašnjeni

Uobičajene greške i zablude

• „TypeScript čini kod bez grešaka.“ Hvata nepodudarnosti u obliku podataka, ne u logici. Depozit od 2% umjesto 20% prolazi provjeru tipova.
• „Tipovi me štite od loših unosa.“ Tipovi nestaju u vrijeme izvođenja. Provjeravajte podatke od korisnika, obrazaca i API-ja.
• any svuda. Kad je AI zapeo, može posegnuti za any ili // @ts-ignore da utiša greške. To skriva probleme umjesto da ih riješi.
• Ignoriranje grešaka tipova jer pregled radi. Neki alati ipak pokreću kod s greškama tipova. Greške su i dalje bugovi koji čekaju.
• „TypeScript je sporiji.“ Tipovi se uklanjaju prije izvođenja; JavaScript koji se izvršava u biti je isti.
• „Samo je za velike timove.“ I solo graditelji imaju koristi, posebno kad AI radi većinu izmjena.

Što tražiti od AI graditelja

• „Koristi TypeScript s uključenim strict načinom.“
• „Definiraj zajedničke tipove za glavne zapise — Customer, Booking, Invoice — i koristi ih i na frontendu i na backendu.“
• „Ne koristi any ni @ts-ignore da zaobiđeš greške; ispravi osnovni problem i reci mi što je bio.“
• „Validiraj sve dolazne podatke na poslužitelju, ne samo tipovima.“
• „Pokreni provjerivač tipova i ispravi svaku grešku prije nego mi kažeš da je gotovo.“
• „Kad preimenuješ polje, ažuriraj svako mjesto koje TypeScript označi.“
• „Objasni ovu grešku tipa običnim jezikom.“

Za više o provjeri onoga što je AI proizveo pogledajte kako pregledati kod generiran AI-jem i kako ispraviti grešku u aplikaciji izgrađenoj uz AI.

TypeScript u Mythexu

Kad ne tražite ništa posebno, Mythex nove projekte pokreće na Vite + React + TypeScript + Tailwind. Uređivač koda uključuje jezičnu podršku — dovršavanje, dijagnostiku i „idi na definiciju“ za TypeScript i JavaScript, među ostalim jezicima — pa su greške tipova vidljive u kodu, a ne samo u pregledu. Uređivač je samo za čitanje na Free planu i potpuno uređiv na Pro planu. I dalje u prvom upitu možete zatražiti drugačiju postavku; stranica dokumentacije o odabiru tehnologije objašnjava kako, a dokumentacija uređivača koda opisuje što uređivač prikazuje.

Pitanja