TypeScript: podstata jazyka, přísné typování a React Native

Co je TypeScript?

TypeScript — programovací jazyk od Microsoftu (2012), vyvinutý Andersem Hejlsbergem (tvůrcem C# a Turbo Pascalu). TypeScript rozšiřuje JavaScript o statický typový systém, rozhraní, generika, výčty a dekorátory. Kód v TS je kompilován do čistého JavaScriptu (transpilace) pomocí kompilátoru tsc nebo Babel — výstupem je standardní JS fungující v jakémkoli prostředí.

Motivace vytvoření TypeScript — omezení JavaScriptu ve velkých projektech. Dynamické typování JS vede k chybám, které jsou odhaleny až za běhu: undefined is not a function, Cannot read property of null. TypeScript přesouvá kontrolu typů do fáze kompilace a předchází těmto chybám před spuštěním kódu. Čím větší je projekt, tím významnější jsou výhody TS: v kódové základně o 100 000+ řádcích TS předchází stovkám potenciálních chyb.

Klíčová vlastnost TypeScript — přísné typování s volitelným příznakem strict: true v tsconfig.json. V přísném režimu jsou zapnuty všechny kontroly: strictNullChecks (null/undefined jsou nekompatibilní s jinými typy), noImplicitAny (zakazuje implicitní any), strictFunctionTypes (kontravariance parametrů funkcí). Ve výchozím nastavení se strict: true doporučuje pro všechny nové projekty.

TypeScript vs JavaScript

TypeScript se liší od JavaScriptu pouze ve fázi vývoje. Po kompilaci jsou typy vymazány — runtime spouští běžný JS bez ztráty výkonu. Je to kompromis: vývoj vyžaduje další krok kompilace, ale poskytuje automatické doplňování v IDE, refaktorování s přejmenováním symbolů a dokumentaci typů přímo v kódu.

Systém typů TypeScript

Systém typů TypeScript — strukturální (structural typing), ne nominativní: dva typy jsou kompatibilní, pokud jejich struktura odpovídá, bez ohledu na název. To se liší od Java/C#, kde kompatibilita je určena názvem třídy nebo rozhraní. Strukturální typování zjednodušuje integraci s existujícím JS kódem — není třeba deklarovat implements pro každý typ.

Základní a pokročilé typy

TypeScript podporuje primitivní typy JS plus: any (vypnutí kontroly), unknown (bezpečné any — vyžaduje kontrolu před použitím), never (nikdy nevrací), void (bez návratu), tuple (tuple pevné délky), enum (výčet), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number).

// Základní systém typů TypeScript
// Primitivní typy
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Union a Literal typy
type Platform = 'ios' | 'android' | 'web';
type Status = 'idle' | 'loading' | 'success' | 'error';

function getSDKVersion(platform: Platform): number {
  switch (platform) {
    case 'ios': return 17;
    case 'android': return 34;
    case 'web': return 2025;
  }
}

// Tuple — tuple pevné délky
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — výčet s autoinkrementem
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — bezpečná alternativa k any
function parseJSON(json: string): unknown {
  return JSON.parse(json);
}

const data = parseJSON('{"name":"TS"}');
if (typeof data === 'object' && data !== null) {
  console.log((data as Record<string, unknown>).name);
}

Typ Platform — union řetězcových literálů omezující hodnoty na tři varianty. Pokud je předáno 'windows', TypeScript vyhodí chybu. Tuple Coordinate zaručuje přesně dvě čísla — to je vhodné pro souřadnice nebo RGB barvy. Enum AppState je kompilován do objektu s reverzním mapováním. Unknown vynucuje kontrolu typu před použitím — na rozdíl od any je unknown ve výchozím nastavení bezpečný.

Rozhraní a type-aliasy

Rozhraní (interface) a type-aliasy (type) v TypeScript popisují tvar objektů. Rozhraní mohou být sloučena (declaration merging — opětovná deklarace přidává pole) a rozšířena (extends). Type-aliasy mohou popisovat union, intersection, tuple a podmíněné typy, ale nepodporují declaration merging. Pravidlo: používejte interface pro API objekty, type — pro všechno ostatní.

// Rozhraní a typy pro React Native
// Rozhraní s volitelnými poli
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // volitelné pole
  readonly createdAt: Date; // pouze pro čtení
}

// Rozšíření rozhraní (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// Typ pro API data
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial činí všechna pole volitelnými
type PartialUser = Partial<User>;

// Pick — vybírá zadaná pole
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — slovník s typovanými klíči
type UserMap = Record<string, User>;

Rozhraní User s ? (volitelné pole) a readonly (pouze pro čtení). ApiResponse<T> — generické rozhraní pro API odpovědi. Partial<User> — utilitní typ, který činí všechna pole volitelnými (užitečné pro editační formuláře). Pick<User, 'id' | 'name'> vybírá pouze zadaná pole — vhodné pro náhledové komponenty. Record<string, User> — slovník uživatelů podle ID.

Generika a utilitní typy

Generika (Generics) — jedna z klíčových funkcí TypeScript, umožňující vytvářet komponenty pracující s libovolnými typy bez ztráty typové bezpečnosti. Generická funkce je definována s parametrem typu v úhlových závorkách: function identity<T>(arg: T): T. Typ T je odvozen automaticky z argumentu nebo uveden explicitně: identity<string>('hello').

Utilitní typy — vestavěná generika pro transformaci typů: Partial<T> (všechna pole volitelná), Required<T> (všechna pole povinná), Readonly<T> (všechna pole pouze pro čtení), Pick<T, K> (výběr polí), Omit<T, K> (vyloučení polí), Record<K, T> (slovník), Exclude<T, U> (vyloučení union), Extract<T, U> (extrakce union), NonNullable<T> (vyloučení null/undefined).

// Generika v TypeScript
// Generická funkce pro práci s API
async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return response.json() as Promise<T>;
}

// Použití s konkrétním typem
interface Product {
  id: number;
  title: string;
  price: number;
}

const products = await fetchData<Product[]>('/api/products');

// Generická třída pro správu stavu
class StateManager<S> {
  private state: S;

  constructor(initial: S) {
    this.state = initial;
  }

  getState(): S {
    return this.state;
  }

  updateState(partial: Partial<S>): void {
    this.state = { ...this.state, ...partial };
  }
}

// Typovaná práce s Redux Reducer
type Action<T, P> = {
  type: T;
  payload: P;
};

type UserAction =
  | Action<'SET_USER', User>
  | Action<'CLEAR_USER', undefined>
  | Action<'UPDATE_USER', Partial<User>>;

Funkce fetchData<T> — typovaný obal kolem fetch. Parametr T určuje tvar odpovědi: při volání fetchData<Product[]> TypeScript ví, že vrácené pole obsahuje objekty Product. Třída StateManager<S> spravuje stav libovolného typu — Partial<S> pro částečnou aktualizaci. Action<T, P> — discriminated union pro Redux akce s automatickým zužováním typu v switch.

TypeScript v React Native

TypeScript v React Native zajišťuje přísné typování props a stavu komponent. React Native CLI vytváří šablonu s příponou .tsx a tsconfig.json. PropTypes (JS) jsou nahrazeny TypeScript rozhraními — kontrola probíhá ve fázi kompilace, ne za běhu. styled-components a React Navigation mají plné typy.

Typování komponenty

React.FC<Props> — typ funkční komponenty s props. Děti (children) jsou automaticky typovány. useRef<T> — reference na nativní komponentu. useState<S> — stav s odvozením typu. useNavigation<T> — typovaná navigace. useCallback, useMemo — s automatickým odvozením typů. Všechny React hooky jsou plně typovány.

// Typovaná React Native komponenta
import React, { useState, useCallback } from 'react';
import {
  View, Text, FlatList, TouchableOpacity,
  StyleSheet
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

// Typy pro navigaci a data
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

type NavigationProp =
  NativeStackNavigationProp<RootStackParamList, 'Home'>;

// Rozhraní pro props
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// Typovaná funkční komponenta
const ProductList: React.FC<ProductListProps> = ({
  products,
  onSelect
}) => {
  const navigation = useNavigation<NavigationProp>();
  const [selectedId, setSelectedId] = useState<number | null>(null);

  const handlePress = useCallback((id: number) => {
    setSelectedId(id);
    onSelect(id);
    navigation.navigate('Profile', { userId: String(id) });
  }, [onSelect, navigation]);

  const renderItem = useCallback(({ item }: { item: Product }) => (
    <TouchableOpacity onPress={() => handlePress(item.id)}>
      <Text>{item.title}</Text>
      <Text>${item.price.toFixed(2)}</Text>
    </TouchableOpacity>
  ), [handlePress]);

  return (
    <FlatList
      data={products}
      renderItem={renderItem}
      keyExtractor={(item) => String(item.id)}
    />
  );
};

Typ RootStackParamList — slovník tras s jejich parametry. NavigationProp — typovaná navigace: navigation.navigate('Profile', { userId }) kontroluje, že Profile přijímá userId. useCallback s typovanými parametry zabraňuje zbytečným renderům. FlatList je typován přes generikum: — data a renderItem získávají typy automaticky.

Nástroje vývojáře TypeScript

Nástroje TypeScript zahrnují kompilátor tsc, tsconfig.json, podporu IDE ve VS Code, ESLint s @typescript-eslint, Prettier a DefinitelyTyped (@types/*). tsc — kompilátor převádějící .ts na .js. tsconfig.json — konfigurace: target (ES2020), module (ESNext), strict: true, outDir (výstupní složka). sourceMap — ladění TS v prohlížeči pomocí map kódu.

DefinitelyTyped — repozitář s typizacemi pro knihovny bez vestavěných typů. Instalace: npm install @types/react @types/react-native --save-dev. Soubory .d.ts — deklarace typů. Moderní knihovny (React, React Native, Angular) obsahují vestavěné typy a nevyžadují @types/. Pro staré JS knihovny je DefinitelyTyped jediným zdrojem typů.

// tsconfig.json — minimální konfigurace
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // pouze kontrola, bez generování JS
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

Volba strict: true zapíná všechny kontroly typů — doporučena pro všechny projekty. jsx: 'react-native' zachovává JSX bez transformace (React Native zpracovává JSX přes Babel). moduleResolution: 'node' — vyhledávání modulů jako v Node.js. esModuleInterop — kompatibilita s CommonJS moduly. noEmit: true — pouze kontrola bez generování JS souborů (Babel nebo Metro generují JS).