Začínáme s TypeScriptem: Praktický průvodce pro vývojáře

Začít s API může znít jako složitý úkol, ale ve skutečnosti jde o rozhraní, které umožňuje dvěma programům spolu komunikovat. Nejjednodušší způsob, jak si to představit, je porovnat API s číšníkem v restauraci: vy si objednáte (pošlete požadavek), číšník to předá kuchyni (serveru) a přinese vám jídlo (data). Pro začátek nemusíte psát složité systémy – stačí vám nástroj na posílání HTTP požadavků a malý kousek testovacího kódu.

Na závěr si vyzkoušejte složitější scénář: požadavek, který vyžaduje autentizaci. Registrace a získání klíče je běžná praxe, ale dávejte pozor na to, abyste klíč nikdy nezveřejnili. Používejte proměnné prostředí nebo konfigurační soubory, které ignoruje vaše verze správy zdrojového kódu. Soustřeďte se na správné zasílání klíče v hlavičce, které je dnes standardem. Postupně tak zvládnete i pokročilejší techniky a vaše aplikace začnou skutečně využívat sílu cizích služeb.

Druhým častým problémem je formátování. Pokud máte v jednom projektu Python a JavaScript, každý má jiný standard (například PEP 8 a Prettier). V nastavení IDE si pro každý jazyk definujte příslušný formátovač a zapněte „format on save". Pozor na konflikt s automatickým importem – často se stává, že IDE vloží import z jiného jazyka, což způsobí chybu. Řešením je zakázat automatické importy v souborech, které nepatří do daného jazyka.

DevOps není nástroj ani pozice, ale způsob myšlení a spolupráce. Spojuje vývoj (Development) a provoz (Operations) do jednoho procesu, kde se automatizace, měření a sdílení odpovědnosti stávají standardem. Pokud s DevOps začínáte, klíčové je nejprve pochopit, že cílem není „koupit DevOps", ale změnit kulturu týmu. Začněte malými krůčky: vyberte si jeden projekt, kde můžete automatizovat nasazení, a postupně přidávejte další prvky.

Základním krokem je instalace a konfigurace. Po vytvoření projektu stačí spustit příkaz pro inicializaci, který vytvoří soubor tsconfig.json. V něm si nastavíte mimo jiné cílovou verzi ECMAScriptu, přísnost kontroly nebo to, kam se mají ukládat zkompilované soubory. Důležité je nezapomenout na možnost strict, která zapne nejpřísnější režim typové kontroly. Ze začátku to může být nepříjemné, ale právě to vás donutí psát čistší kód a předejdete mnoha problémům.

Když už data máte, přichází na řadu jejich zpracování. Začněte tím, že z odpovědi vytáhnete konkrétní hodnotu – třeba jméno nebo číslo. Většina moderních jazyků má funkce, které převedou JSON na slovník nebo objekt, takže nemusíte parsovat ručně. Otestujte si, co se stane, když API vrátí prázdný výsledek – dobrý kód by měl umět ošetřit i tuto situaci. Doporučuji psát si krátké úryvky kódu, které pak můžete použít jako stavební bloky pro složitější aplikace.

Při připojování komponent k Reduxu se vyhněte nadměrnému používání connect nebo useSelector. Vybírejte si malé části stavu, ne celý objekt. Pokud komponenta potřebuje jen jednu hodnotu, vyberte ji přímo. To platí i pro akce – dispatchujte jen ty, které komponenta skutečně používá. Pokud máte komponentu, která potřebuje mnoho hodnot, zvažte, zda není lepší rozdělit ji na menší části. Tento přístup zlepšuje čitelnost a testovatelnost.

Když jako JavaScriptový vývojář poprvé otevřete soubor s příponou .ts, může vás napadnout, že jde jen o další nadstavbu, která vám přidělá práci. Opak je pravdou. TypeScript je nadmnožina JavaScriptu, která do vašeho kódu přidává statické typování. To znamená, že mnoho chyb odhalíte už při psaní, ne až za běhu v prohlížeči. Nemusíte se bát, že byste museli vše přepisovat – stačí začít postupně a typy přidávat tam, kde vám dávají smysl.

Nakonec se zaměřte na testování. Redux se díky čistým funkcím testuje snadno: reducer otestujete bez renderování komponenty, action creatory porovnáte s očekávanými objekty. Pro integrační testy použijte renderWithRedux, který obalí komponentu storem. Nezapomínejte testovat i chybové stavy, nejen happy path. Tím odhalíte problémy dřív, než se dostanou do produkce.

Jak správně typovat funkce a objekty Největší sílu TypeScriptu využijete při definování funkcí a objektů. U funkcí vždy explicitně typujte parametry a návratovou hodnotu. Například místo function add(a, b) napište function add(a: number, b: number): number. Tím zajistíte, že funkci nelze zavolat s řetězcem, i kdyby se to na první pohled zdálo v pořádku. U objektů použijte rozhraní (interface) nebo typové aliasy (type). Rozhraní je vhodnější pro definici tvaru objektu, který se bude rozšiřovat, zatímco typové aliasy se hodí pro uniony a komplexnější typy. Typickým začátečnickým omylem je použití typu any všude, kde si nejste jistí. To obchází celý systém kontroly a v podstatě se vracíte k JavaScriptu. Místo toho zkuste použít unknown a pak pomocí kontrol typu (tzv. type guards) zúžit, co skutečně chcete povolit.