Lekce 11 · Ekosystém

Kam napsat typ (syntaxe TypeScriptu)

Kdy dvojtečka, kdy <…>, kdy nic. Anatomie zápisu, tahák situací a doplňovačka.

Než začneme: štítky na stěhovacích krabicích

Když se stěhuješ, lepíš na krabice štítky: „kuchyň – sklo“, „knihy“, „zimní oblečení“. Krabicím samotným je štítek jedno – věci v nich jsou pořád stejné. Ale stěhováci podle štítků poznají, co se nesmí pokládat pod těžké knihy a kam co odnést. A až je všechno vybalené, štítky strhneš a vyhodíš.

TypeScript jsou štítky na JavaScriptu. Lepíš je na proměnné, parametry a vlastnosti: „tady je číslo“, „tady je uživatel nebo nic“. Kód díky nim nefunguje jinak – ale editor a kompilátor podle nich poznají, když se pokusíš dát sklo pod knihy (předat text tam, kde má být číslo). A při kompilaci se všechny štítky strhnou: prohlížeč dostane čistý JavaScript.

Tahle lekce není o tom, jaké štítky existují, ale kam se lepí: kdy dvojtečka, kdy <…> a kdy nic. Když to máš v malíku, následující lekce o TypeScriptu v Reactu bude hračka.

Průhledné a neprůhledné krabice

Na průhlednou krabici štítek nepotřebuješ – je vidět, co v ní je. Stejně tak TypeScript u const count = 0 vidí nulu a sám ví, že jde o číslo. Tomu se říká odvození typu (inference). Štítek musíš nalepit tam, kde dovnitř vidět není: na prázdnou krabici (prázdné pole), na krabici, která zatím zeje prázdnotou (null), nebo na krabici, která teprve přijede (parametr funkce, data z API).

1. Jedno hlavní pravidlo

Druhá věc, kterou je dobré vědět: typy po kompilaci zmizí – štítky se strhnou. Když z kódu mentálně vymažeš všechny typy, musí zbýt platný JavaScript. To je nejlepší test, jestli je typ na správném místě.

Zkusme to na typické funkci:

function formatPrice(amount: number, currency?: string): string {
  return amount + ' ' + (currency ?? 'Kč')
}

amount: number – parametr amount je typu číslo. Název, dvojtečka, typ.
currency?: string – otazník patří k názvu: parametr je nepovinný. Uvnitř funkce může být undefined, proto ?? 'Kč'.
): string – dvojtečka za závorkou s parametry je typ toho, co funkce vrací. Stejné pravidlo, jen „název“ je tentokrát celé volání funkce.

Teď štítky strhneme:

function formatPrice(amount, currency) {
  return amount + ' ' + (currency ?? 'Kč')
}

Zbyl platný JavaScript. Kdyby ne – třeba kdyby z ({ title: string }) zbylo něco, co dělá jinou věc – typ byl na špatném místě. K tomu se dostaneme v další kapitole.

Ukázka

Anatomie řádku – klikni na části kódu

Co vidíš: Několik typických řádků s typy. Každý kousek je obarvený: fialově typ, oranžově syntaxe TypeScriptu (dvojtečky, otazníky, závorky), normálně obyčejný JavaScript. Podtržené kousky mají vysvětlivku.

Vyzkoušej:

V příkladu Proměnná klikni postupně na price, dvojtečku a number. Pod kódem se objeví, co který kousek znamená.
Přepni na Funkce a najdi dvě dvojtečky: jednu u parametru, druhou za závorkou. Klikni na obě a porovnej vysvětlivky.
Projdi Props komponenty a useState. U každého si v duchu vymaž fialové a oranžové části – vždy zbyde platný JavaScript.

Co z toho plyne: Typ je vždy štítek nalepený na konkrétní místo, nejčastěji za dvojtečku. Bez něj zůstane JavaScript, který dělá totéž.

Načítám interaktivní část…

2. Kde se dvojtečka píše a kde ne

Dvojtečka je v JavaScriptu i bez TypeScriptu – v objektech odděluje klíč a hodnotu, v destrukturaci přejmenovává. Proto je to nejčastější zdroj zmatku: stejný znak, tři různé významy. Pomáhá se zeptat: stojí dvojtečka za něčím, co právě deklaruju? Pak je to štítek.

Místo	Zápis	Poznámka
Proměnná	`let name: string`	Jen když TS typ neodvodí z hodnoty.
Parametr	`(name: string) => …`	Vždy.
Nepovinný parametr / vlastnost	`name?: string`	Otazník patří k názvu.
Návratová hodnota	`function f(): string`	Za `)`, u arrow funkce před `=>`.
Vlastnost v interface / type	`{ name: string }`	Popis tvaru objektu.
Props komponenty	`({ name }: Props)`	Za celou destrukturaci!

Tady dvojtečka NENÍ	Zápis	Proč
Definice type	`type Id = string \| number`	Pojmenováváš typ → rovnítko.
Definice interface	`interface User { … }`	Klíčové slovo + jméno + tělo.
Typ pro funkci/hook	`useState<User \| null>(null)`	Typ se funkci PŘEDÁVÁ ve špičatých závorkách.
Objekt s hodnotami	`{ name: 'Jana' }`	Tady dvojtečka odděluje klíč a HODNOTU.
JSX	`<Card title="Ahoj" />`	V JSX žádné typy – TS je kontroluje podle props.
Destrukturace	`{ title: nadpis }`	Dvojtečka tu znamená PŘEJMENOVÁNÍ proměnné.

3. Kdy typ psát a kdy ne

Zpátky ke krabicím. Štítek lepíš tam, kam není vidět, a na krabice, které přijíždějí zvenku. Na průhlednou krabici ho nelepíš – jen bys přidal práci a riziko, že štítek nebude odpovídat obsahu.

// Průhledné krabice – TS vidí dovnitř, štítek nepiš
const count = 0                           // number
const names = ['Jana', 'Petr']            // string[]
const [open, setOpen] = useState(false)   // boolean

// Krabice přijíždějí zvenku – štítek piš vždy
function greet(name: string) { … }        // parametr: kdo ví, co sem kdo pošle
interface CardProps { title: string }     // props: totéž pro komponenty

// Neprůhledné krabice – TS nevidí dovnitř, štítek dopiš
const [user, setUser] = useState<User | null>(null)  // teď null, později User
const [todos, setTodos] = useState<Todo[]>([])       // prázdné pole – prvky čeho?

Jednoduché pravidlo: typy piš na hranicích – kde data vstupují (parametry, props, API) nebo kde TS nemá z čeho typ poznat. Uvnitř funkcí ho nech pracovat.

✅ Piš vždy	🤔 Piš, když TS neodvodí	🚫 Nepiš (zbytečné)
Parametry funkcí	`useState<User \| null>(null)`	`const x: number = 5`
Props komponent (interface)	`useState<Todo[]>([])`	`useState<number>(0)`
Tvary dat (interface User)	`useRef<HTMLDivElement>(null)`	Parametry inline handlerů v JSX
Typ hodnoty kontextu	Samostatné event handlery	Parametry callbacků (`.map(item => …)`)
Veřejné funkce knihovny / utils	[object Object]přiřazení později	Návratový typ jednoduchých funkcí

4. Tahák: chci otypovat…

Tahák pro situace, které potkáš nejčastěji. Používej ho jako kuchařku: najdi, co právě píšeš, a podívej se, kam štítek patří.

Ukázka

Vyber situaci

Co vidíš: Tlačítka s typickými situacemi, rozdělená na obyčejný JavaScript a React. Ke každé situaci je správný zápis, nejčastější chyba a krátké vysvětlení.

Vyzkoušej:

Klikni na props komponenty. Všimni si chyby { title: string } uvnitř závorek – za chvíli ji uvidíš i v kvízu.
Projdi useState a useRef. U obou je štítek ve špičatých závorkách – typ se hooku předává, ne lepí za dvojtečku.
Podívej se na chybu v catch a data z API. To jsou krabice, které přijely zvenku a nevíš, co v nich je.

Co z toho plyne: Většina situací se opakuje. Až si je párkrát najdeš v taháku, začneš štítky psát na správná místa automaticky.

Načítám interaktivní část…

5. Slovníček symbolů

Symbol	Příklad	Význam
`:`	`age: number`	„je typu“
`?`	`age?: number`	nepovinné (může chybět / být undefined)
`\|`	`string \| null`	„nebo“ – union
`&`	`A & B`	„a zároveň“ – spojení typů
`[]`	`string[]`	pole
`[A, B]`	`[string, number]`	tuple – pole s pevnou délkou
`=>`	`(id: number) => void`	typ funkce
`<T>`	`Array<User>`	generikum – typ jako parametr
`as`	`data as User`	„věř mi“ – přetypování bez kontroly (šetři s ním)
`as const`	`['a', 'b'] as const`	nejpřesnější možný (readonly) typ
`!`	`ref.current!`	„určitě není null“ – bez kontroly
`typeof`	`typeof config`	typ z existující hodnoty
`keyof`	`keyof User`	union názvů vlastností: "name" \| "age"

Co znamená <T extends { id: number }> (výzva findById)?

Samotné <T> znamená „jakýkoli typ“. Pak by ale TypeScript nedovolil napsat item.id, protože neví, jestli T nějaké id má. extends přidá podmínku: „T může být cokoli, co má aspoň vlastnost id typu number“.

function findById<T extends { id: number }>(items: T[], id: number): T | undefined {
  return items.find((item) => item.id === id)   // ✅ item.id existuje, protože T ho musí mít
}

findById(products, 1)        // T = Product – vrátí Product | undefined
findById(users, 1)           // T = User
findById(['a', 'b'], 1)      // ❌ string nemá id

Výsledek si pamatuje přesný typ: z findById(products, 1) dostaneš Product se všemi jeho vlastnostmi, ne jen { id: number }. Slovo extends tu neznamená dědičnost jako u tříd, čti ho jako „splňuje“.

6. Jak ti pomůže editor

Najetí myší ukáže odvozený typ čehokoli.
Ctrl + mezerník v props komponenty nabídne všechny povolené props.
F12 na typu (třeba ChangeEvent) skočí na jeho definici.
Ctrl + . (Quick Fix) na parametru s any nabídne „Infer parameter types from usage“.
Chybové hlášky čti odspodu. Poslední řádek dlouhé chyby bývá ten podstatný („Property 'email' is missing…“).

Procvič si to: doplňovačka

Doplň do políček, co tam patří – typ, symbol, nebo nic. Každé cvičení trénuje jedno místo, kam se štítek lepí. Pamatuj na průhledné krabice: někdy je správná odpověď nechat políčko prázdné.

Tip: prázdné políčko znamená „sem nepíšu nic“ – i to může být správná odpověď. Enter = zkontrolovat.Vyřešeno 0 / 16

1. Parametr funkce

function double(n) {
  return n * 2
}

2. Návratová hodnota

function greet(name: string) {
  return 'Ahoj ' + name
}

3. Nepovinný parametr

function greet(name: string, excited boolean) {
  return excited ? name + '!' : name
}

4. Tvar objektu

interface User {
  name string
  age number     // nepovinné
}

5. Hodnota vs. typ

interface User { name: string }

const jana: User = { name:  }

6. Typ jako union

type Status  'idle' | 'loading' | 'error'

7. Props komponenty

interface AvatarProps {
  src: string
  size?: number
}

function Avatar({ src, size = 40 }) {
  return <img src={src} width={size} />
}

8. Callback v props

interface ListProps {
  items: string[]
  onSelect:    // dostane index vybrané položky
}

9. useState s null

const [user, setUser] = useState(null)

10. useState s prázdným polem

const [todos, setTodos] = useState([])

11. Kdy typ nepsat

const [count, setCount] = useState(0)

12. useRef na DOM element

const inputRef = useRef(null)

<input ref={inputRef} />

13. Samostatný event handler

const handleChange = (e) => {
  setName(e.target.value)
}

14. Async funkce

async function loadUser(id: number):  {
  const res = await fetch('/api/users/' + id)
  return res.json()
}

15. Generická funkce

function first(items: T[]): T | undefined {
  return items[0]
}

16. Tuple z hooku

function useToggle() {
  const [on, setOn] = useState(false)
  return [on, () => setOn(!on)] 
}

Kde je chyba?

Kvíz Co je špatně?

function Badge({ label: string, color: string }) {
  return <span style={{ color }}>{label}</span>
}

Nic, je to správněUvnitř destrukturace dvojtečka přejmenovává – typ musí být za }: ({ label, color }: { label: string; color: string })Místo string má být StringChybí návratový typ

Kvíz Proč setItems([...items, 'nový']) hlásí chybu?

const [items, setItems] = useState([])

Protože spread nejde použít se stavemTS z prázdného pole odvodil never[] – je potřeba useState<string[]>([])Protože chybí keyProtože items je readonly

Kvíz Která verze je správně?

// A
const handleClick: (e: MouseEvent<HTMLButtonElement>) => void = (e) => { … }
// B
const handleClick = (e: MouseEvent<HTMLButtonElement>) => { … }
// C
const handleClick = (e) : MouseEvent<HTMLButtonElement> => { … }

Jen AJen BA i BJen C

Kvíz Kam patří typ u arrow komponenty?

const Card = ({ title }) => <h2>{title}</h2>

const Card: CardProps = ({ title }) => …const Card = ({ title }: CardProps) => …const Card = ({ title: CardProps }) => …const Card = ({ title }) => <h2>{title}</h2>: CardProps

Rozcvička

Výzva

Typy místo any

Rozcvička

Vyměň dvakrát any za skutečný typ a doplň, co funkce vracejí.

Zadání (stejný text je v komentáři na začátku souboru)

VÝZVA: Typy místo any

Funkce mají u parametrů typ `any` a nic nevracejí.

1. formatPrice: změň `any` na `number` a vrať text s měnou: formatPrice(25) → '25 Kč'
2. isAdult: změň `any` na `number`, za závorku doplň návratový typ `: boolean`
   a vrať age >= 18

Testy kontrolují výsledky. Typy ověří `npm run typecheck`, když máš kurz stažený.

Načítám interaktivní část…

Mám hotovo

Výzvy

V obou výzvách je hotový kód plný any – krabic bez štítků. Tvým úkolem je štítky nalepit na správná místa: nejdřív u obyčejných funkcí, pak v React komponentě. Na stránce se nic nezmění; rozdíl uvidí jen TypeScript.

Výzva

Kam s typy? – obyčejné funkce

Lehká

Sedm malých funkcí, sedm míst, kam typ patří. Výstup na stránce se nezmění – rozdíl uvidí jen TypeScript.

Zadání (stejný text je v komentáři na začátku souboru)

VÝZVA: Kam s typy? – obyčejné funkce

Každá funkce níže má `any`. Nahraď je správnými typy. Nejde o React – jde o to,
KAM se typ píše: za parametr, za závorku s parametry, do interface, do <T>.

1. interface Person: firstName (string), lastName (string), age (NEPOVINNÝ number).
   Pak `export type Person = any` nahraď za `export interface Person { … }`.
2. formatPrice(amount, currency) – amount je number, currency je 'CZK' | 'EUR'
   s výchozí hodnotou 'CZK'. Vrací string.
3. sum(numbers) – pole čísel → number.
4. parseAge(input) – string → number | null (null, když to není číslo).
5. fullName(person) – Person → string.
6. adults(people) – Person[] → Person[] (jen ti, kdo mají age >= 18).
7. findById(items, id) – GENERICKÁ: funguje pro jakékoli pole objektů s `id: number`
   a vrací typ položky (nebo undefined). Tip: <T extends { id: number }>

✅ Ověř: npm run typecheck:challenges  (soubor Utils.typetest.tsx)

Načítám interaktivní část…

Mám hotovo

Výzva

Kam s typy? – React komponenta

Střední Bonusová výzva

Všechna typická místa v React komponentě: props, callback, useState, useRef, event handler a vlastní hook.

🔒 Bonusová výzva

Střední a těžké výzvy jsou bonus pro přihlášené. Registrace je zdarma – stačí e-mail, žádné heslo.

Shrnutí

Typy jsou štítky na JavaScriptu: kód nemění, jen ho kontrolují, a při kompilaci se strhnou. Po jejich vymazání musí zbýt platný JavaScript.
název: Typ – dvojtečka za tím, co deklaruješ (proměnná, parametr, vlastnost), znamená „je typu“. Návratový typ za závorkou parametrů: function f(): T.
Typ props za celou destrukturací: ({ a, b }: Props). Uvnitř { } dvojtečka přejmenovává!
type X = … (rovnítko), interface X { … }, typ pro hook ve špičatých závorkách: useState<T>().
Štítky na hranice a neprůhledné krabice (parametry, props, tvary dat, null, prázdná pole); průhledné krabice nech TS odvodit.
Nevíš? Najeď myší – editor ti typ řekne.

Načítám lekci…

💬 Našel jsi chybu, něco ti není jasné, nebo máš nápad? Napiš mi.