Co je TypeScript? Srozumitelný průvodce pro nevývojáře

TypeScript je JavaScript s typy. Přidáte popisky, které říkají, jaký druh dat má každá hodnota být — číslo, text, seznam objednávek —, a TypeScript váš kód zkontroluje na nesoulad dřív, než vůbec poběží. Web TypeScriptu ho popisuje jako „JavaScript se syntaxí pro typy“; typy se při převodu kódu na obyčejný JavaScript odstraní a ten pak běží všude, kde běží JavaScript.

Proč na tom záleží, když stavíte s AI

Modely AI píšou kód rychle a rychlý kód má chyby: pole customerName v jednom souboru a customer_name v jiném, cena předaná jako text místo čísla, funkce zavolaná s chybějící hodnotou. V čistém JavaScriptu se mnohé z těchto chyb ukážou až ve chvíli, kdy někdo klikne na špatné tlačítko.

TypeScript mnohé z nich odhalí dřív, už při psaní kódu:

• AI dostane okamžitou zpětnou vazbu. Chyby typů ukážou přesný řádek, který je špatně, takže agent ho může opravit dřív, než to uvidíte vy.
• Změny jsou bezpečnější. Přejmenujete pole a TypeScript označí každé místo, které stále používá starý název.
• Kód si sám vysvětluje. Typy dokumentují, co funkce očekává a co vrací, což pomůže vám, AI i každému vývojáři, který na tom bude později pracovat.
• Editory jsou chytřejší. Automatické doplňování a „přejít na definici“ fungují lépe, protože editor ví, čím každá hodnota je.

To je velký důvod, proč mnoho AI tvůrců aplikací používá TypeScript jako výchozí.

Každodenní přirovnání

Představte si skladiště s označenými sektory. Každý sektor má cedulku: „Jen palety“, „Chlazené“, „Max. 500 kg“. Když přijde zásilka, kontrolor u dveří porovná zboží s cedulkou. Mražená ryba, která mířila do sektoru se suchým zbožím, se zastaví u dveří, ne až o týden později, když už páchne.

TypeScript je kontrolor u dveří. Typy jsou cedulky. Kontrola probíhá předtím, než se zboží — váš kód — začne používat. A jakmile je všechno na místě, cedulky se sundají: běžící JavaScript už žádné typy neobsahuje.

Jak TypeScript funguje

1. Vy (nebo AI) napíšete soubory .ts nebo .tsx — TypeScript s popisky typů.
2. Kontrola typů přečte kód a nesoulad nahlásí jako chybu v editoru nebo při sestavení.
3. Krok sestavení odstraní typy a vytvoří běžný JavaScript.
4. JavaScript běží v prohlížeči nebo na serveru (Node.js, Deno, Bun).

Důležitý důsledek: TypeScript kontroluje kód, který jste napsali, ne data, která přicházejí za chodu aplikace. Pokud externí API vrátí něco neočekávaného, TypeScript to nevidí, dokud nepřidáte validaci za běhu.

Praktický příklad: formulář pro rezervace

Předpokládejme, že stavíte aplikaci na rezervace pro kadeřnictví. Tady je typ popisující rezervaci:

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

A funkce, která spočítá zálohu:

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

Nyní sledujte, co TypeScript odhalí.

Přepsané pole.

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

TypeScript nahlásí, že prise není známá vlastnost a že chybí price. V čistém JavaScriptu by tiše spočítal zálohu NaN (není číslo).

Špatný druh hodnoty.

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

TypeScript nahlásí, že text nelze použít tam, kde se čeká číslo. Bez něj "40" * 0.2 náhodou funguje, ale "40" + 5 dá "405" — druh chyby, která se ukáže na faktuře.

Služba, která neexistuje.

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

TypeScript nahlásí, že "perm" není mezi povolenými službami. Když salon později přidá trvalou, přidáte ji do typu a TypeScript ukáže každé místo, které je potřeba upravit — ceník, formulář, barvy v kalendáři.

Co nezachytí. Pokud formulář rezervace pošle z prohlížeče na server price: "40", TypeScript na serveru to za běhu nevidí. Proto dobře postavené aplikace validují i příchozí data, často knihovnou pro validaci, která ověří tvar a převede je na správný Booking.

TypeScript vs JavaScript

Vysvětlení běžných pojmů

Časté chyby a mylné představy

• „TypeScript dělá kód bez chyb.“ Odhalí nesoulad v tvaru dat, ne špatnou logiku. Záloha 2 % místo 20 % projde kontrolou typů bez problémů.
• „Typy mě chrání před špatným vstupem.“ Typy za běhu zmizí. Validujte data od uživatelů, z formulářů a z API.
• any všude. Když AI uvízne, může sáhnout po any nebo // @ts-ignore, aby chyby umlčela. To problémy skryje, místo aby je opravilo.
• Ignorování chyb typů, protože náhled funguje. Některé nástroje kód s chybami typů stále spustí. Chyby jsou pořád chyby, které čekají, až vzniknou problémy.
• „TypeScript je pomalejší.“ Typy se odstraní před během; spuštěný JavaScript je v podstatě stejný.
• „Je to jen pro velké týmy.“ Samostatní tvůrci z něj také těží, zvlášť když většinu úprav dělá AI.

Co žádat od AI tvůrce

• „Použij TypeScript se zapnutým přísným režimem.“
• „Definuj sdílené typy pro hlavní záznamy — Customer, Booking, Invoice — a používej je na frontendu i na backendu.“
• „Nepoužívej any ani @ts-ignore, abys obešel chyby; oprav původní problém a řekni mi, v čem byl.“
• „Validuj všechna příchozí data na serveru, nejen pomocí typů.“
• „Spusť kontrolu typů a oprav každou chybu, než mi řekneš, že je hotovo.“
• „Když přejmenuješ pole, aktualizuj každé místo, které TypeScript označí.“
• „Vysvětli tuhle chybu typu obyčejnou řečí.“

Jak zkontrolovat, co AI vytvořila, najdete v článcích jak zkontrolovat kód vygenerovaný AI a jak ladit aplikaci postavenou s AI.

TypeScript v Mythexu

Když nic konkrétního nežádáte, Mythex zakládá nové projekty na Vite + React + TypeScript + Tailwind. Editor kódu obsahuje jazykovou inteligenci — doplňování, diagnostiku a přechod na definici pro TypeScript a JavaScript a další jazyky —, takže chyby typů jsou vidět přímo v kódu, ne jen v náhledu. Editor je ve verzi Free jen pro čtení a ve verzi Pro plně upravitelný. Pokud chcete jiné nastavení, můžete o něj požádat už v prvním zadání; stránka dokumentace o volbě technologií vysvětluje, jak to funguje, a dokumentace editoru kódu popisuje, co editor zobrazuje.

Otázky