Jan Mikoláš
Slovník pojmů
TypeScript
TypeScript pomáhá odhalit chybný předpoklad o tvaru dat nebo API dříve, než se dostane do prohlížeče. Není však runtime validátor, bezpečnostní vrstva ani náhrada testů.
Stručná definice
Typy kontrolují zdrojový kód, výsledkem zůstává JavaScript.
TypeScript rozumí JavaScriptové syntaxi a doplňuje ji o anotace, inference, rozhraní, generika a kontrolu kompatibility hodnot. Kompilátor tsc může typy prověřit a podle konfigurace vytvořit výstupní JavaScript nebo fungovat jen jako checker. Editor díky stejnému systému nabízí navigaci, refaktoring a rychlejší nalezení chybných volání.
Typová informace se při překladu maže. Pokud API vrátí nečekaný JSON, TypeScript tomu nezabrání jen proto, že proměnná má napsaný typ. Na hranici nedůvěryhodných dat je potřeba runtime validace, korektní chybový stav a serverová autorizace. TypeScript zlepšuje návrh a údržbu klientského kódu, ne důvěryhodnost vstupu.
K čemu se používá
Přesnější kontrakty ve frontendovém i integračním kódu
Největší přínos přichází se sdílenými datovými modely, většími komponentami a častými změnami API.
- typy requestů, response a stavů komponenty při volání HTTP API
- refaktoring modulů se zachycením neplatných argumentů a návratových hodnot
- generické pomocné funkce pro seznamy, formuláře a výsledky načítání
- přehlednější práci s null, optional hodnotou a union stavem
- kontrolu v CI spolu s testy, lintem a buildem frontendové aplikace
Praktický příklad
Modelování stavu načtení dostupnosti
Union typ vyjadřuje, že komponenta není současně v loading, error a ready stavu. Při přidání dalšího stavu může compiler upozornit na místo, kde kód nezpracoval všechny varianty. Je to přesnější než několik nezávislých boolean příznaků, které mohou vytvořit rozpornou kombinaci.
Ukázka popisuje stav uvnitř aplikace. Odpověď z API musí být před převedením na tento typ skutečně ověřena, protože síťový vstup může být poškozený, starší nebo získaný z jiné verze backendu.
TypeScript
type Availability =
| { state: 'loading' }
| { state: 'ready'; inStock: boolean }
| { state: 'error'; message: string };
function label(value: Availability): string {
return value.state === 'ready' && value.inStock ? 'Skladem' : 'Ověřuji dostupnost';
}Jak funguje
Od TypeScript zdroje k prověřenému JavaScriptu
Typová kontrola probíhá před během programu a musí odpovídat skutečnému způsobu, jak se bude JavaScript načítat a spouštět.
- Zdroj popíše hodnoty Vývojář doplní typy tam, kde zlepšují kontrakt; compiler jiné typy odvodí z použití a deklarací.
- tsconfig určí pravidla Konfigurace nastaví strictness, moduly, cílový JavaScript a způsob emitování. Musí odpovídat bundleru nebo runtime.
- Compiler zkontroluje vztahy Odhalí například překlep vlastnosti, neplatný argument, chybějící variantu unionu nebo návratovou hodnotu.
- Typy se odstraní Výstup obsahuje JavaScript. Browser ani Node.js neprovádí TypeScriptové kontroly při každém requestu.
- Runtime ověří cizí data API response, URL parametr či local storage se validují na hranici; poté s nimi může zbytek programu pracovat přes bezpečný typ.
Důležité pojmy a synonyma
Typová kontrola před během programu, ne nový runtime.
TypeScript se často popisuje jako typed superset JavaScriptu; přesnější je zdůraznit jeho statickou kontrolu a odstraněné typy.
Inference a anotace
Compiler mnoho typů odvodí z hodnot a použití. Anotace je užitečná na veřejné hranici funkce či modelu, ne nutně u každé lokální proměnné.
Union a narrowing
Union říká, že hodnota může mít několik podob. Podmínka nad diskriminační vlastností zúží možnou variantu a vede k bezpečnějšímu zpracování stavů.
Interface a type
Oba umějí popsat tvar hodnot. Volba závisí na potřebě rozšiřování a skládání typů; v runtime z nich nevzniká objekt ani validátor.
Generika
Generický typ zachovává informaci o typu hodnoty v opakovaně použitelné funkci nebo datové struktuře. Nemá být abstrakcí bez konkrétního přínosu.
strict a any
Strict režim zpřísňuje vybrané kontroly. any naopak část kontroly vypíná; někdy je nutný při migraci, ale jako trvalý únik snižuje hodnotu TypeScriptu.
Vztah k ostatním nástrojům
TypeScript doplňuje JavaScript, testy a validaci, nejezdí místo nich.
Různé chyby se zachytávají v různých okamžicích: před spuštěním, při testu, na síťové hranici nebo na serveru.
- JavaScript
- Je runtime výstup a jazyk, jehož chování TypeScript zachovává. Platný JavaScript nemusí projít všemi přísnými TypeScript kontrolami.
- Testování
- Typ checker odhalí část chyb kontraktu, ale netestuje skutečný browser, API, business pravidlo ani uživatelskou cestu.
- Runtime validace
- Kontroluje nedůvěryhodnou odpověď z API nebo URL při běhu. Typová anotace bez takové validace odpovědi nedokáže věřit.
- CI/CD
- Spuštění tsc v pipeline brání mergi kódu s typovou chybou, pokud je kontrola opravdu povinná.
Výhody a omezení
Přesnější kontrakt přináší disciplínu, ne absolutní jistotu.
Přínosy
- chyby vlastností, argumentů a návratových hodnot se zachytí před spuštěním
- bezpečnější refaktoring modulů a sdílených datových modelů
- lepší navigace, autocomplete a hledání použití v editoru
- explicitní modelování loading, error a success stavů
Rizika a časté chyby
- type assertion nebo any použité k umlčení skutečného problému
- předpoklad, že API response má deklarovaný typ i bez runtime validace
- příliš komplikovaná generika, která rozhraní znečitelní
- konfigurace module a emit neodpovídající bundleru nebo runtime
- považování zeleného tsc za náhradu testů, bezpečnostní kontroly a code review
Kdy přináší nejvíc
Při růstu frontendových hranic a sdílených kontraktů.
TypeScript pomáhá zejména u aplikace s více moduly, složitějšími formuláři, daty z API a dlouhodobou údržbou. U malého izolovaného skriptu může být čistý JavaScript s dobrou strukturou přiměřenější. Volba záleží na délce života kódu, počtu změn a tom, zda tým skutečně udržuje konfiguraci a typy.
Migrace nemusí být jednorázová. Lze začít na hranicích API a nových modulech, zapnout rozumně přísnou kontrolu a postupně zmenšovat místa s any. Cílem není typovat vše pro typování, ale zachytit chyby tam, kde mají reálnou cenu.
Na co myslet
Důvěryhodné typy začínají na hranici dat.
TypeScript je nejsilnější, když se nepřesné vstupy oddělí a zbytek kódu pracuje s jasnými stavy.
- zapnout přiměřeně přísný tsconfig a spouštět typecheck v CI
- pro API response modelovat loading, error a success místo volných boolean příznaků
- nepoužívat any ani as jako automatické řešení chyb compileru
- validovat síťová data, URL parametry a hodnoty z úložiště před jejich důvěryhodným použitím
- ověřit, že TypeScript module a emit odpovídají skutečnému bundleru nebo runtime
Časté otázky
TypeScript v praxi
Je TypeScript nový runtime místo JavaScriptu?
Ne. TypeScript se před spuštěním kontroluje a typové zápisy se odstraní. Browser obvykle vykonává výsledný JavaScript.
Nahradí TypeScript runtime validaci API?
Ne. Síťová odpověď může mít jiný tvar, než deklaruje typ. Na hranici API je potřeba ověřit skutečná data a zpracovat chybu.
Musím typovat každou proměnnou?
Ne. Compiler řadu typů správně odvodí. Anotace má největší hodnotu na veřejném rozhraní, složitém modelu a místě, kde objasní záměr.
Jsou interface a type totéž?
Oba umějí popsat tvar hodnot, ale liší se možnostmi skládání a rozšiřování. Pro běžný kód je důležitější srozumitelný kontrakt než dogmatická volba.
Jak stavím aplikace v praxi
Kontrakty dat řeším od API hranice až po rozhraní uživatele.
U e-commerce a integračních aplikací propojuji frontendové stavy s API, validací, testováním a čitelnou architekturou dat.