Šta je TypeScript? Vodič običnim jezikom za nestručnjake

TypeScript je JavaScript sa tipovima. Dodajete oznake koje kažu kakva vrsta podataka svaka vrednost treba da bude — broj, tekst, lista porudžbina — a TypeScript proverava vaš kod zbog neslaganja pre nego što se ikad pokrene. Sajt TypeScripta ga opisuje kao „JavaScript sa sintaksom za tipove“; tipovi se uklanjaju kada se kod pretvori u običan JavaScript, koji zatim radi svuda gde radi JavaScript.

Zašto je to važno kada pravite uz AI

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

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

• AI dobija trenutnu povratnu informaciju. Greške u tipovima pokazuju tačnu liniju koja nije u redu, pa agent može da je popravi pre nego što vi to vidite.
• Izmene su bezbednije. Preimenujete polje, a TypeScript označi svako mesto koje još koristi stari naziv.
• Kod sam objašnjava sebe. Tipovi dokumentuju šta funkcija očekuje i šta vraća, što pomaže vama, AI-ju i svakom programeru koji kasnije radi na tome.
• Editori su pametniji. Automatsko dovršavanje i „idi na definiciju“ rade bolje jer editor zna šta je svaka vrednost.

Ovo je veliki razlog zašto mnogi AI alati za pravljenje aplikacija podrazumevano koriste TypeScript.

Svakodnevna analogija

Zamislite skladište sa označenim odeljenjima. Svako odeljenje ima tablu: „Samo paleti“, „Hlađeno“, „Maks. 500 kg“. Kada stigne isporuka, kontrolor na vratima upoređuje robu sa tablom. Smrznuta riba namenjena odeljenju za suvu robu zaustavlja se na vratima, a ne otkriva se nedelju dana kasnije kada zaudara.

TypeScript je kontrolor na vratima. Tipovi su table. Provera se dešava pre nego što roba — vaš kod — uđe u upotrebu. A kada je sve na mestu, table se skidaju: pokrenuti JavaScript više nema tipove u sebi.

Kako TypeScript radi

1. Vi (ili AI) pišete .ts ili .tsx datoteke — TypeScript, sa oznakama tipova.
2. Proveravač tipova čita kod i prijavljuje neslaganja kao greške u editoru ili u buildu.
3. Korak builda uklanja tipove, pravi običan JavaScript.
4. JavaScript se pokreće u browseru ili na serveru (Node.js, Deno, Bun).

Važna posledica: TypeScript proverava kod koji ste napisali, a ne podatke koji stižu dok aplikacija radi. Ako spoljašnji API vrati nešto neočekivano, TypeScript to ne može da vidi bez dodavanja validacije tokom rada.

Radni primer: forma 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; // ? znači da je polje opcionalno
};

I funkcija koja računa 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 vrednosti.

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

TypeScript prijavljuje da se string ne može koristiti tamo gde se očekuje broj. Bez njega, "40" * 0.2 slučajno radi, ali "40" + 5 daje "405" — vrsta greške koja se pojavi 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 permanent, dodate ga u tip, a TypeScript pokazuje svako mesto koje treba ažurirati — cenovnik, formu, boje kalendara.

Šta ne može da uhvati. Ako forma za rezervaciju pošalje price: "40" iz browsera na server, TypeScript na serveru to ne vidi tokom rada. Zato dobro napravljene aplikacije takođe validiraju dolazne podatke, često bibliotekom za validaciju koja proverava oblik i pretvara ga u ispravan Booking.

TypeScript i JavaScript

Uobičajeni pojmovi objašnjeni

Uobičajene greške i pogrešna shvatanja

• „TypeScript čini kod bez grešaka.“ Hvata neslaganja u obliku podataka, ne pogrešnu logiku. Depozit od 2% umesto 20% prolazi proveru tipova bez problema.
• „Tipovi me štite od loših unosa.“ Tipovi nestaju tokom rada. Validirajte podatke od korisnika, formi i API-ja.
• any svuda. Kada je AI zaglavljen, može da posegne za any ili // @ts-ignore da ućutka greške. To sakriva probleme umesto da ih reši.
• Ignorisanje grešaka u tipovima zato što Preview radi. Neki alati i dalje pokreću kod sa greškama u tipovima. Greške su i dalje bagovi koji čekaju.
• „TypeScript je sporiji.“ Tipovi se uklanjaju pre pokretanja; JavaScript koji se izvršava je u suštini isti.
• „To je samo za velike timove.“ I solo graditelji imaju koristi, posebno kada AI pravi većinu izmena.

Šta tražiti od AI alata

• „Koristi TypeScript sa uključenim strict režimom.“
• „Definiši 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 bi prošao greške; reši osnovni problem i reci mi šta je bio.“
• „Validiraj sve dolazne podatke na serveru, ne samo tipovima.“
• „Pokreni proveravač tipova i popravi sve greške pre nego što mi javiš da je gotovo.“
• „Kada preimenuješ polje, ažuriraj svako mesto koje TypeScript označi.“
• „Objasni ovu grešku tipa običnim jezikom.“

Za više o proveri onoga što je AI napravio, pogledajte kako pregledati kod koji je napravio AI i kako ispraviti grešku u aplikaciji napravljenoj uz AI.

TypeScript u Mythex-u

Kada ne tražite ništa posebno, Mythex novim projektima podrazumevano dodeljuje Vite + React + TypeScript + Tailwind. Code editor uključuje jezičku inteligenciju — dovršavanje, dijagnostiku i „idi na definiciju“ za TypeScript i JavaScript, između ostalih jezika — tako da su greške u tipovima vidljive u kodu, a ne samo u Preview-u. Editor je samo za čitanje na Free planu i potpuno uređiv na Pro planu. I dalje možete u prvom upitu zatražiti drugačiju postavku; stranica dokumentacije o kako se bira tehnologija objašnjava kako, a dokumentacija code editora pokriva ono što editor prikazuje.

Pitanja