Šta je TypeScript? Vodič jednostavnim jezikom za one koji nisu programeri

TypeScript je JavaScript sa tipovima. Dodajete oznake koje govore kakva vrsta podataka svaka vrijednost treba da bude — broj, tekst, lista narudžbi — a TypeScript provjerava vaš kod za neslaganja prije nego se ikada pokrene. Sajt TypeScripta ga opisuje kao „JavaScript sa sintaksom za tipove“; tipovi se izbace kada se kod pretvori u običan JavaScript, koji zatim radi svuda gdje radi JavaScript.

Zašto je važno kada gradite uz AI

AI modeli brzo pišu kod, a brz kod ima greške: polje customerName u jednoj datoteci i customer_name u drugoj, cijena prosljeđena kao tekst umjesto broja, funkcija pozvana bez neke vrijednosti. U običnom JavaScriptu se mnoge od tih grešaka pokažu tek kada neko klikne pogrešno dugme.

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

• AI dobija trenutnu povratnu informaciju. Greške u tipovima pokazuju tačnu liniju koja nije ispravna, pa agent može da je popravi prije nego vi to vidite.
• Izmjene su sigurnije. Preimenujete polje, a TypeScript označi svako mjesto koje i dalje koristi stari naziv.
• Kod objašnjava sam sebe. Tipovi dokumentuju šta funkcija očekuje i vraća, što pomaže vama, AI-u i svakom programeru koji kasnije radi na njemu.
• Uređivači postaju pametniji. Automatsko dopunjavanje i „idi na definiciju“ rade bolje jer uređivač zna šta je svaka vrijednost.

To je veliki razlog zašto mnogi AI alati za izradu aplikacija podrazumijevano koriste TypeScript.

Svakodnevna analogija

Zamislite skladište za otpremu sa označenim odjeljcima. Svaki odjeljak ima natpis: „Samo paleti“, „Hlađeno“, „Maks. 500 kg“. Kada stigne isporuka, kontrolor na ulazu upoređuje robu sa natpisom. Zamrznuta riba namijenjena suvom odjeljku biva zaustavljena na ulazu, a ne otkrivena sedmicu kasnije kada počne da smrdi.

TypeScript je kontrolor na ulazu. Tipovi su natpisi. Provjera se dešava prije nego roba — vaš kod — počne da se koristi. A kada je sve na svom mjestu, natpisi se skinu: pokrenuti JavaScript više nema tipove u sebi.

Kako TypeScript funkcioniše

1. Vi (ili AI) pišete .ts ili .tsx datoteke — TypeScript, sa oznakama tipova.
2. Provjerivač tipova čita kod i prijavljuje neslaganja kao greške u uređivaču ili u izgradnji.
3. Korak izgradnje uklanja tipove, proizvodeći običan JavaScript.
4. JavaScript se izvršava u pregledaču ili na serveru (Node.js, Deno, Bun).

Važna posljedica: TypeScript provjerava kod koji ste napisali, a ne podatke koji stižu dok aplikacija radi. Ako spoljni API vrati nešto neočekivano, TypeScript to ne može vidjeti osim ako ne dodate validaciju u vrijeme izvršavanja.

Praktičan primjer: formular za rezervaciju

Recimo da pravite 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; // znak ? znači da je opciono
};

I funkcija koja izračunava depozit:

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

Sada pogledajte šta 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 se string ne može koristiti tamo gdje se očekuje broj. Bez toga, "40" * 0.2 slučajno radi, ali "40" + 5 daje "405" — vrsta greške koja se pokaže na fakturi.

Usluga koja ne postoji.

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

TypeScript prijavljuje da "perm" nije jedna od dozvoljenih usluga. Kada salon kasnije doda permanentne, dodate je u tip, a TypeScript pokaže svako mjesto koje treba ažurirati — cjenovnik, formular, boje kalendara.

Šta ne može da uhvati. Ako formular za rezervaciju pošalje price: "40" iz pregledača na server, TypeScript na serveru to ne vidi u vrijeme izvršavanja. Zato dobro napravljene aplikacije takođe validiraju dolazne podatke, često bibliotekom za validaciju koja provjerava strukturu i pretvara je u ispravan Booking.

TypeScript naspram JavaScripta

Osnovni pojmovi objašnjeni

Česte greške i zablude

• „TypeScript čini kod bez grešaka.“ Hvata neslaganja u strukturi podataka, a ne pogrešnu logiku. Depozit od 2% umjesto 20% prolazi provjeru tipova.
• „Tipovi me štite od loših unosa.“ Tipovi nestaju u vrijeme izvršavanja. Validirajte podatke od korisnika, formulara i API-ja.
• any svuda. Kada se AI zaglavi, može posegnuti za any ili // @ts-ignore da ućutka greške. To sakriva probleme umjesto da ih rješava.
• Ignorisanje grešaka tipa jer pregled radi. Neki alati i dalje pokreću kod sa greškama u tipovima. Greške su i dalje bagovi koji čekaju da se dogode.
• „TypeScript je sporiji.“ Tipovi se uklone prije pokretanja; JavaScript koji se izvršava je u suštini isti.
• „Samo je za velike timove.“ I solo graditelji imaju koristi, pogotovo kada AI radi većinu izmjena.

Šta tražiti od vašeg AI alata

• „Koristi TypeScript sa uključenim strogim režimom.“
• „Definiši zajedničke tipove za naše glavne zapise — Customer, Booking, Invoice — i koristi ih i na frontendu i na backendu.“
• „Ne koristi any ili @ts-ignore da zaobiđeš greške; popravi osnovni problem i reci mi koji je bio.“
• „Validiraj sve dolazne podatke na serveru, ne samo tipovima.“
• „Pokreni provjerivač tipova i popravi svaku grešku prije nego mi kažeš da je gotovo.“
• „Kada preimenuješ polje, ažuriraj svako mjesto koje TypeScript označi.“
• „Objasni ovu grešku tipa običnim engleskim jezikom.“

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

TypeScript u Mythexu

Kada ništa posebno ne tražite, Mythex podrazumijevano pokreće nove projekte na Vite + React + TypeScript + Tailwind. Uređivač koda uključuje jezičku inteligenciju — dopune, dijagnostiku i „idi na definiciju“ za TypeScript i JavaScript, među ostalim jezicima — pa su greške u tipovima vidljive u kodu, a ne samo u pregledu. Uređivač je samo za čitanje na Free planu, a potpuno izmjenjiv na Pro planu. I dalje možete u prvom upitu tražiti drugačije podešavanje; stranica dokumentacije o tome kako se bira tehnologija objašnjava kako, a dokumentacija uređivača koda pokriva ono što uređivač prikazuje.

Pitanja