1.10 Type Inference vs Annotations

Výuka

TypeScript má 2 způsoby, jak určit typ proměnné:

JavaScript

JavaScript nemá statické typy, takže inference ani annotations neexistují:

// JavaScript - žádné typy
let name = 'Jan';     // prostě proměnná
let age = 25;
let isActive = true;

// Typ se může změnit
name = 123;  // ✅ OK (ale možná nechceš)

TypeScript

Type Inference (odvození)

TS automaticky odvodí typ z přiřazené hodnoty:

// TS odvodí typy sám
let name = 'Jan';        // name: string
let age = 25;            // age: number
let isActive = true;     // isActive: boolean
let numbers = [1, 2, 3]; // numbers: number[]

// Funguje i pro objekty
let user = {
  name: 'Jan',
  age: 25
};
// user: { name: string; age: number; }

// A funkce
function add(a: number, b: number) {
  return a + b;  // návratový typ: number (odvozeno)
}

// Inference z kontextu
const numbers = [1, 2, 3];
numbers.map(n => n * 2);  // n: number (odvozeno z pole)

Type Annotations (explicitní typy)

Někdy musíš typ napsat explicitně:

// Explicitní typ
let name: string = 'Jan';
let age: number = 25;
let isActive: boolean = true;

// Kdy je nutné: deklarace bez inicializace
let value: string;  // bez anotace by bylo 'any'
value = 'hello';

// Funkce s explicitními typy
function greet(name: string): string {
  return `Hello, ${name}`;
}

// Komplexní typy
let user: { name: string; age: number };
user = { name: 'Jan', age: 25 };

// Union types
let id: string | number;
id = 123;      // ✅ OK
id = 'abc';    // ✅ OK

// Arrays
let numbers: number[] = [1, 2, 3];
let items: Array<string> = ['a', 'b'];

Kdy použít co?

✅ Používej Inference (nech TS odvodit)

// Typ je zřejmý z hodnoty
const name = 'Jan';           // inference: string
const age = 25;               // inference: number
const active = true;          // inference: boolean

// Z funkčních volání
const upper = 'hello'.toUpperCase();  // inference: string
const len = 'hello'.length;           // inference: number

✅ Používej Annotations (nap iš typ)

// 1. Deklarace bez inicializace
let user: User;  // musíš napsat typ
user = getUser();

// 2. Funkční parametry (vždy!)
function greet(name: string) {  // parametr MUSÍ mít typ
  return `Hello, ${name}`;
}

// 3. Návratový typ funkce (doporučeno)
function calculate(): number {  // explicitní návrat
  return 42;
}

// 4. Komplexní typy
const config: { theme: string; debug: boolean } = {
  theme: 'dark',
  debug: true
};

Rozdíl JS vs TS

// JavaScript - žádné typy
let x = 5;
x = 'hello';  // ✅ OK

// TypeScript - Inference
let x = 5;     // x: number (odvozeno)
// x = 'hello'; // ❌ Error

// TypeScript - Annotation
let y: number = 5;
// y = 'hello';  // ❌ Error

Tip

💡 Preferuj Inference:

// ❌ Zbytečně explicitní
const name: string = 'Jan';
const age: number = 25;

// ✅ Nech TS odvodit
const name = 'Jan';
const age = 25;

💡 Vždy typuj parametry funkcí:

// ❌ Špatně - 'any' type
function greet(name) {  
  return `Hello, ${name}`;
}

// ✅ Dobře - explicitní typ
function greet(name: string) {
  return `Hello, ${name}`;
}

💡 Explicitní návratový typ u veřejných funkcí:

// ✅ Doporučeno pro API/veřejné funkce
export function calculate(x: number, y: number): number {
  return x + y;
}