1.5 Datové typy - přehled
Výuka
Proč potřebujeme datové typy?
Představ si, že počítač je jako velmi přesný, ale hloupý pomocník. Když mu řekneš "sečti 5 a 3", potřebuje vědět:
- Jsou to čísla? Pak
5 + 3 = 8 - Jsou to texty? Pak
"5" + "3" = "53"(spojení řetězců)
Datové typy říkají počítači, jak má s hodnotou pracovat. Bez nich by nevěděl, co s ní dělat.
Dva světy: Primitivní vs Referenční typy
Primitivní typy (immutable - neměnné):
- Hodnota je přímo uložena v proměnné
- Když je zkopíruješ, vytvoří se nová nezávislá kopie
- Jsou "jednoduché" - číslo, text, true/false...
Referenční typy (objekty, pole):
- Proměnná obsahuje jen "odkaz" (adresu) na data v paměti
- Když je zkopíruješ, obě proměnné ukazují na stejná data!
7 základních typů v JavaScriptu
| Typ | Popis | Příklad | Kdy použít |
|---|---|---|---|
undefined |
Hodnota nebyla přiřazena | let x; |
Automaticky, když zapomeneš inicializovat |
null |
Explicitní "nic" | const y = null; |
Když chceš říct "zatím nemám hodnotu" |
string |
Text | 'Hello', "World" |
Jména, zprávy, jakýkoli text |
number |
Všechna čísla | 42, 3.14, NaN |
Počítání, měření, ID |
boolean |
Pravda/nepravda | true, false |
Podmínky, přepínače |
object |
Kolekce vlastností | { name: 'Jan' } |
Složitější data s více vlastnostmi |
symbol |
Unikátní identifikátor | Symbol('id') |
Pokročilé - unikátní klíče objektů |
Co přidává TypeScript?
TypeScript rozšiřuje JavaScript o statické typy - kontrolu typů před spuštěním:
JavaScript: Napíšeš kód → Spustíš → Chyba typu za běhu 😱
TypeScript: Napíšeš kód → TS kontrola → Chyba v editoru → Opravíš → Spustíš ✅
Klíčové body:
- TS typy neexistují za běhu (runtime) - zkompilují se pryč
- Slouží pouze pro kontrolu při překladu (compile time)
- Můžeš explicitně anotovat typy:
let s: string = 'hi' - Nebo nechat TS typ odvodit:
let s = 'hi'(TS ví, že je to string)
JavaScript
let a; // undefined
const b = null;
const s = 'Hello';
const n = 3.14;
const ok = true;
const obj = { x: 1 };
const id = Symbol('id');
// Zjištění typu
console.log(typeof s); // "string"
console.log(typeof n); // "number"
console.log(typeof ok); // "boolean"
console.log(typeof obj);// "object"
TypeScript
let a: undefined;
const b: null = null;
const s: string = 'Hello';
const n: number = 3.14;
const ok: boolean = true;
const obj: { x: number } = { x: 1 };
const id: symbol = Symbol('id');
// TS kontroluje typy při kompilaci
const greeting: string = 'Hi';
// greeting = 123; // ❌ Error: Type 'number' is not assignable to type 'string'
Rozdíl JS vs TS
| JavaScript | TypeScript |
|---|---|
| Typy se kontrolují za běhu | Typy se kontrolují při kompilaci |
| Chyby typů objevíš až při spuštění | Chyby typů vidíš hned v editoru |
typeof operátor v runtime |
Type annotations v kódu |
| Flexibilní, ale riskantní | Bezpečnější, ale více psaní |
Výhody TypeScript:
- Odchytíš chyby dřív (před spuštěním)
- Lepší autocomplete v editoru
- Dokumentace přímo v kódu
- Refaktoring je bezpečnější
Tip
💡 Pro začátečníky: Nauč se nejdřív JavaScript typy a jejich chování. TypeScript pak přidává jen "bezpečnostní síť" - kontroluje, že používáš správné typy.
💡 Best practice: V TS nech TypeScript odvodit typ (inference), pokud je to zřejmé:
// ✅ Dobré - inference
const count = 0; // TS ví, že je to number
// ⚠️ Zbytečné - explicitní
const count: number = 0;
Kvíz
Které výroky jsou pravdivé?
❌ - null a undefined jsou různé typy, i když oba reprezentují "prázdnou" hodnotu
❌ - TS typy neexistují za běhu, jsou pouze pro compile-time kontrolu
✅ - Každá JS hodnota má typ (zjistíš ho pomocí typeof)
✅ - TS kontroluje typy při kompilaci, ne za běhu
🎯 Závěrečný projekt
Po dokončení všech 8 dílů vytvoříte jednoduchou Todо aplikaci v čistém JavaScriptu. Naučíte se, jak aplikovat vše, co jste se naučili, na reálný projekt.
Zobrazit podrobnosti projektu →Informace o seriálu
Obtížnost
Délka
Cca 480 minut
Počet videí
8 videí + projekty
Certifikát
Po dokončení obdržíte certifikát
Lekce v této sekci
- 1.1 Úvod do JavaScriptu a TypeScriptu
- 1.2 Nastavení prostředí
- 1.3 První program
- 1.4 Proměnné: var, let, const
- 1.5 Datové typy - přehled
- 1.6 String (řetězce)
- 1.7 Number (čísla)
- 1.8 Boolean (pravda/nepravda)
- 1.9 Null a Undefined
- 1.10 Type Inference vs Annotations
- 1.11 Aritmetické operátory
- 1.12 Porovnávací operátory
- 1.13 Logické operátory
- 1.14 Komentáře
- 1.15 Console metody
Struktura lekcí (souborový strom)
- 1.1 Úvod do JavaScriptu a TypeScriptu
- 1.2 Nastavení prostředí
- 1.3 První program
- 1.4 Proměnné: var, let, const
- 1.5 Datové typy - přehled
- 1.6 String (řetězce)
- 1.7 Number (čísla)
- 1.8 Boolean (pravda/nepravda)
- 1.9 Null a Undefined
- 1.10 Type Inference vs Annotations
- 1.11 Aritmetické operátory
- 1.12 Porovnávací operátory
- 1.13 Logické operátory
- 1.14 Komentáře
- 1.15 Console metody
- 03.01 Deklarace funkce
- 03.02 Function Expression
- 03.03 Arrow Functions
- 03.04 Parametry a argumenty
- 03.05 Return hodnoty
- 03.06 Výchozí parametry
- 03.07 Rest parametry
- 03.08 Co je Scope
- 03.09 Lexikální Scope
- 03.10 Řetězec Scope
- 03.11 Globální Scope
- 03.12 Životní Cyklus Proměnných
- 03.13 Omezení Scope
- 03.14 Použití Closures
- 03.15 Callback funkce
- 03.16 Higher-order Functions
- 03.17 IIFE
- 03.18 Void funkce
- 03.19 Rekurze
- v přípravě
- v přípravě
- v přípravě
- v přípravě
- 01 — Co je Next.js
- 02 — Vytvoření projektu
- 03 — Struktura projektu (app/)
- 04 — Page komponenty (page.js / page.tsx)
- 05 — Layout komponenty (layout.js / layout.tsx)
- 06 — File-based routing
- 07 — Dynamické routy ([id]/page.js)
- 08 — Link komponenta (navigace)
- 09 — Image komponenta (next/image)
- 10 — Metadata (title, description, Open Graph)
- 11 — Loading UI (loading.js / loading.tsx)
- 12 — Error handling (error.js / error.tsx)
- 13 — Not Found (not-found.js / not-found.tsx)
- v přípravě
- v přípravě
- v přípravě