Čo je TypeScript? Jednoduchý sprievodca pre nevývojárov

TypeScript je JavaScript s typmi. Pridávate štítky, ktoré hovoria, akého druhu dáta má byť každá hodnota — číslo, text, zoznam objednávok — a TypeScript skontroluje kód na nesúlady ešte predtým, než sa spustí. Stránka TypeScriptu ho opisuje ako „JavaScript so syntaxou pre typy“; typy sa pri prevode na obyčajný JavaScript odstránia a ten potom beží všade, kde beží JavaScript.

Prečo je to dôležité, keď staviate s AI

Modely AI píšu kód rýchlo a rýchly kód má chyby: pole customerName v jednom súbore a customer_name v inom, cena odovzdaná ako text namiesto čísla, funkcia zavolaná s chýbajúcou hodnotou. V čistom JavaScripte sa mnohé z týchto chýb ukážu až vtedy, keď niekto klikne na zlé tlačidlo.

TypeScript mnohé z nich zachytí skôr, už počas písania kódu:

• AI dostane okamžitú spätnú väzbu. Chyby typov ukážu presný riadok, ktorý je zlý, takže ho agent môže opraviť skôr, než ju uvidíte.
• Zmeny sú bezpečnejšie. Premenujete pole a TypeScript označí každé miesto, ktoré stále používa starý názov.
• Kód sa vysvetľuje sám. Typy dokumentujú, čo funkcia očakáva a čo vracia, čo pomáha vám, AI aj každému vývojárovi, ktorý na tom neskôr pracuje.
• Editory sú inteligentnejšie. Automatické dopĺňanie a „prejsť na definíciu“ fungujú lepšie, pretože editor vie, čím každá hodnota je.

Toto je veľký dôvod, prečo mnohí AI tvorcovia aplikácií používajú TypeScript predvolene.

Každodenná analógia

Predstavte si skladový sklad s označenými sekciami. Každá sekcia má tabuľu: „Iba palety“, „Chladené“, „Max. 500 kg“. Keď príde dodávka, kontrolór pri vchode porovná tovar s tabuľou. Mrazený rybí tovar smerujúci do sekcie suchého tovaru sa zastaví pri vchode, nie až o týždeň, keď zapácha.

TypeScript je kontrolór pri vchode. Typy sú tabule. Kontrola prebehne predtým, než sa tovar — váš kód — dostane do používania. A keď je všetko na svojom mieste, tabule sa zložia: bežiaci JavaScript už v sebe nemá žiadne typy.

Ako TypeScript funguje

1. Vy (alebo AI) napíšete súbory .ts alebo .tsx — TypeScript s typovými štítkami.
2. Kontrolór typov prečíta kód a nesúlady nahlási ako chyby v editore alebo pri zostavení.
3. Krok zostavenia odstráni typy a vytvorí obyčajný JavaScript.
4. JavaScript sa spustí v prehliadači alebo na serveri (Node.js, Deno, Bun).

Dôležitý dôsledok: TypeScript kontroluje kód, ktorý ste napísali, nie dáta, ktoré prichádzajú počas behu aplikácie. Ak externé API pošle niečo neočakávané, TypeScript to nevidí, kým nepridáte validáciu počas behu.

Praktický príklad: formulár na rezerváciu

Predstavte si, že stavate aplikáciu na rezervácie pre kaderníctvo. Tu je typ, ktorý opisuje rezerváciu:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // ? znamená voliteľné
};

A funkcia, ktorá vypočíta zálohu:

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

Teraz sledujte, čo TypeScript zachytí.

Preklepnuté pole.

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

TypeScript nahlási, že prise nie je známa vlastnosť a price chýba. V čistom JavaScripte by sa záloha potichu vypočítala ako NaN (nie číslo).

Zlý druh hodnoty.

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

TypeScript nahlási, že reťazec sa nedá použiť tam, kde sa očakáva číslo. Bez neho "40" * 0.2 náhodou funguje, ale "40" + 5 dá "405" — taký druh chyby, ktorý sa ukáže na faktúre.

Služba, ktorá neexistuje.

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

TypeScript nahlási, že "perm" nie je jednou z povolených služieb. Keď salón neskôr pridá perm, doplníte ho do typu a TypeScript ukáže každé miesto, ktoré treba upraviť — cenník, formulár, farby kalendára.

Čo nedokáže zachytiť. Ak formulár rezervácie pošle z prehliadača na server price: "40", TypeScript na serveri to počas behu nevidí. Preto dobre postavené aplikácie overujú aj prichádzajúce dáta, často knižnicou na validáciu, ktorá skontroluje tvar a premení ho na správny Booking.

TypeScript vs JavaScript

Vysvetlenie bežných pojmov

Bežné chyby a mylné predstavy

• „TypeScript robí kód bez chýb.“ Zachytí nesúlad tvaru dát, nie chybnú logiku. Záloha 2 % namiesto 20 % prejde kontrolou typov bez problémov.
• „Typy ma chránia pred zlým vstupom.“ Typy počas behu zmiznú. Overujte dáta od používateľov, formulárov a API.
• any všade. Keď je AI zaseknutá, môže siahnuť po any alebo // @ts-ignore, aby utíšila chyby. To problémy skryje namiesto ich opravy.
• Ignorovanie chýb typov, lebo náhľad funguje. Niektoré nástroje stále spúšťajú kód s chybami typov. Tieto chyby sú stále chyby, ktoré čakajú, kedy nastanú.
• „TypeScript je pomalší.“ Typy sa odstránia pred spustením; JavaScript, ktorý beží, je v podstate rovnaký.
• „Je to len pre veľké tímy.“ Solo tvorcovia profitujú tiež, najmä keď väčšinu úprav robí AI.

Čo požadovať od vášho AI tvorcu

• „Používaj TypeScript so zapnutým striktným režimom.“
• „Definuj zdieľané typy pre naše hlavné záznamy — Customer, Booking, Invoice — a používaj ich na frontende aj na backende.“
• „Nepoužívaj any ani @ts-ignore na obídenie chýb; oprav základný problém a povedz mi, aký bol.“
• „Over všetky prichádzajúce dáta na serveri, nielen typmi.“
• „Spusti kontrolu typov a oprav každú chybu, skôr než mi povieš, že je hotovo.“
• „Keď premenuješ pole, aktualizuj každé miesto, ktoré TypeScript označí.“
• „Vysvetli túto chybu typu obyčajnou rečou.“

Viac o kontrole toho, čo AI vytvorila, nájdete v ako skontrolovať kód vygenerovaný AI a ako ladiť aplikáciu postavenú s AI.

TypeScript v Mythex

Keď nepožiadate o nič konkrétne, Mythex začína nové projekty na Vite + React + TypeScript + Tailwind. Editor kódu obsahuje jazykovú inteligenciu — dopĺňanie, diagnostiku a prechod na definíciu pre TypeScript a JavaScript, medzi ďalšími jazykmi — takže chyby typov sú viditeľné v kóde, nielen v náhľade. Editor je len na čítanie vo Free a plne upraviteľný vo Pro. Iné nastavenie môžete požiadať aj vo svojom prvom prompte; stránka dokumentácie o tom, ako sa technológia vyberá, vysvetľuje postup a dokumentácia editora kódu popisuje, čo editor zobrazuje.

Otázky