TypeScript: Tipy pro efektivnější typování
Pokročilé techniky typování v TypeScriptu, které vám pomohou psát bezpečnější a čitelnější kód.
TypeScript je jako asistent, který vás hlídá při psaní kódu. Místo aby vás program překvapil chybou až u zákazníka, TypeScript vám řekne "Pozor, tady máš chybu!" ještě než kód spustíte. Podívejme se, jak ho využít naplno.
Co je TypeScript a proč ho používat?
JavaScript je jako psaní dopisu bez kontroly pravopisu - napíšete ho rychle, ale můžete udělat překlepy. TypeScript je ta kontrola pravopisu, která vás upozorní na chyby ještě před odesláním.
Praktický příklad:
JavaScript (bez TypeScript):
let cena = "1000"
let sleva = cena * 0.1 // Problém! "1000" je text, ne číslo
TypeScript vás varuje:
❌ Error: Nelze násobit text číslem
1. Interface vs Type - Kdy použít co?
Interface a Type jsou jako dva způsoby, jak popsat tvar objektu. Je to jako když říkáte "Chci auto" vs "Chci červené auto se 4 dveřmi a dieselovým motorem".
Kdy použít Interface:
- Pro popis objektů (uživatel, produkt, objednávka)
- Když potřebujete rozšířit existující typy
- Pro React komponenty
Kdy použít Type:
- Pro kombinace typů ("admin" nebo "user")
- Pro složitější logiku typování
- Pro utility types
2. Union Types - Více možností
Union type říká: "Tady může být A nebo B nebo C". Jako když objednáváte pizzu a můžete si vybrat z několika druhů.
Praktický příklad - Stav objednávky:
type StavObjednavky = "nova" | "zpracovava_se" | "odeslana" | "dorucena"
TypeScript teď hlídá, že můžete použít jen tyto 4 stavy. Nemůžete omylem napsat "odeslaná" s háčkem nebo "delivered" anglicky.
3. Generics - Univerzální typy
Generics jsou jako šablona na výrobu krabiček. Můžete mít krabičku na boty, na oblečení, na hračky - stejný tvar, jiný obsah.
Reálný příklad:
Máte funkci pro načítání dat z API. Někdy načítáte produkty, jindy uživatele, jindy objednávky. Generics vám umožní použít stejnou funkci pro všechno:
- načtiData<Produkt>() - vrátí produkty
- načtiData<Uživatel>() - vrátí uživatele
- načtiData<Objednávka>() - vrátí objednávky
4. Optional Chaining - Bezpečné čtení dat
Optional chaining (?.je jako "jemné" otevírání dveří. Místo aby jste do nich vrazili, nejdřív zkontrolujete, jestli tam vůbec jsou.
Praktický příklad:
Bez optional chaining (nebezpečné):
const mesto = uzivatel.adresa.mesto // ❌ Pokud adresa neexistuje = chyba!
S optional chaining (bezpečné):
const mesto = uzivatel?.adresa?.mesto // ✓ Pokud neexistuje = undefined, žádná chyba
5. Readonly - Ochrana dat
Readonly je jako uzamčení trezoru. Data můžete číst, ale nemůžete je měnit. Užitečné pro konfiguraci, ceny, konstanty.
Praktické využití:
- Konfigurace: API klíče, URL endpointy (neměly by se měnit)
- Produkty: Po načtení z databáze by se neměly měnit
- Historie: Logy, historie objednávek (neměnné záznamy)
6. Type Guards - Kontrola typů
Type guards jsou jako bezpečnostní kontrola na letišti. Zkontrolujete, co to je, než s tím začnete pracovat.
Praktický příklad:
Máte funkci, která může vrátit buď uživatele nebo chybu. Než začnete pracovat s uživatelem, zkontrolujete, jestli to opravdu je uživatel:
if ("email" in vysledek) {
// Je to uživatel, má email
} else {
// Je to chyba
}
7. Utility Types - Hotové šablony
TypeScript má předpřipravené utility types - jako šablony v Wordu. Nemusíte všechno psát od nuly.
Nejužitečnější utility types:
- Partial: Udělá všechny vlastnosti volitelné
Užitečné pro formuláře - nemusíte vyplnit všechno najednou - Required: Udělá všechny vlastnosti povinné
Užitečné pro validaci - před odesláním musí být vše vyplněné - Pick: Vybere jen některé vlastnosti
Užitečné pro API - posíláte jen část dat - Omit: Odstráním některé vlastnosti
Užitečné pro odstranění citlivých dat (hesla, tokeny)
8. Never Type - "Tohle se nikdy nestane"
Never type říká: "Tato funkce nikdy neskončí normálně". Užitečné pro funkce, které vždy vyhodí chybu nebo běží donekonečna.
Praktický příklad:
Funkce pro zpracování chyby, která vždy vyhodí exception:
function vyhodChybu(zprava: string): never {
throw new Error(zprava)
}
TypeScript teď ví, že po této funkci žádný další kód neběží.
Praktické tipy pro začátečníky
Začněte jednoduše:
- ✓ Začněte typováním proměnných (string, number, boolean)
- ✓ Pak typujte parametry funkcí
- ✓ Nakonec návratové hodnoty funkcí
- ✓ Nepoužívejte "any" - to je jako vypnout TypeScript
- ✓ Nechte TypeScript odvodit typy, kde to jde
Časté chyby a jak se jich vyvarovat
- ❌ Příliš složité typy:
Začátečníci často vytvářejí zbytečně složité typy. Začněte jednoduše. - ❌ Používání "any" všude:
"any" vypíná TypeScript. Používejte jen když opravdu nevíte typ. - ❌ Ignorování chyb:
Pokud TypeScript hlásí chybu, něco je špatně. Neignorujte to. - ✓ Správný přístup:
Typujte postupně, začněte jednoduchými typy, složité přidávejte podle potřeby.
Závěr
TypeScript není nepřítel, ale pomocník. Ano, na začátku vás může brzdit, ale časem oceníte, že vám zachrání hodiny debugování. Je to investice, která se vrátí.
Začněte jednoduše, typujte postupně a nechte TypeScript, aby vám pomohl psát lepší kód. Časem to půjde automaticky a nebudete si umět představit vývoj bez něj.
Potřebujete pomoc s TypeScriptem?
Pomohu vám s migrací JavaScript projektu na TypeScript nebo vás naučím efektivně typovat. Code review, konzultace a praktické tipy přímo na vašem projektu.