TypeScript: istota języka, ścisłe typowanie i React Native

Czym jest TypeScript?

TypeScript — język programowania od Microsoft (2012), opracowany przez Andersa Hejlsberga (twórcę C# i Turbo Pascal). TypeScript rozszerza JavaScript o statyczny system typów, interfejsy, generyki, wyliczenia i dekoratory. Kod w TS jest kompilowany do czystego JavaScriptu (transpilacja) za pomocą kompilatora tsc lub Babel — na wyjściu otrzymujemy standardowy JS działający w każdym środowisku.

Motywacja stworzenia TypeScript — ograniczenia JavaScriptu w dużych projektach. Dynamiczne typowanie JS prowadzi do błędów wykrywanych dopiero w uruchomieniu: undefined is not a function, Cannot read property of null. TypeScript przenosi sprawdzanie typów na etap kompilacji, zapobiegając tym błędom przed wykonaniem kodu. Im większy projekt, tym bardziej znaczące są zalety TS: w bazie kodu z 100 000+ linii TS zapobiega setkom potencjalnych błędów.

Kluczowa cecha TypeScript — ścisłe typowanie z opcjonalną flagą strict: true w tsconfig.json. W trybie ścisłym włączane są wszystkie sprawdzenia: strictNullChecks (null/undefined są niezgodne z innymi typami), noImplicitAny (zakazuje niejawnego any), strictFunctionTypes (kontrawariancja parametrów funkcji). Domyślnie strict: true jest zalecane dla wszystkich nowych projektów.

TypeScript vs JavaScript

TypeScript różni się od JavaScriptu tylko na etapie programowania. Po kompilacji typy są usuwane — uruchomienie wykonuje zwykły JS bez utraty wydajności. To kompromis: programowanie wymaga dodatkowego kroku kompilacji, ale daje autouzupełnianie w IDE, refaktoryzację z zmianą nazw symboli i dokumentację typów bezpośrednio w kodzie.

System typów TypeScript

System typów TypeScript — strukturalny (structural typing), a nie nominalny: dwa typy są zgodne, jeśli ich struktura jest taka sama, niezależnie od nazwy. Różni się to od Java/C#, gdzie zgodność jest określana przez nazwę klasy lub interfejsu. Typowanie strukturalne upraszcza integrację z istniejącym kodem JS — nie trzeba deklarować implements dla każdego typu.

Typy podstawowe i zaawansowane

TypeScript obsługuje typy pierwotne JS plus: any (wyłączenie sprawdzania), unknown (bezpieczny any — wymaga sprawdzenia przed użyciem), never (nigdy nie zwraca), void (brak zwrotu), tuple (krotka o stałej długości), enum (wyliczenie), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number).

// Podstawowy system typów TypeScript
// Typy pierwotne
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Typy Union i Literal
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 — krotka o stałej długości
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — wyliczenie z autoinkrementacją
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — bezpieczna alternatywa 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 literałów stringowych, ograniczający wartości do trzech wariantów. Jeśli przekazać 'windows', TypeScript zgłosi błąd. Krotka Coordinate gwarantuje dokładnie dwie liczby — jest to wygodne dla współrzędnych lub kolorów RGB. Enum AppState kompiluje się do obiektu z odwrotnym mapowaniem. Unknown wymusza sprawdzenie typu przed użyciem — w przeciwieństwie do any, unknown jest domyślnie bezpieczny.

Interfejsy i aliasy typów

Interfejsy (interface) i aliasy typów (type) w TypeScript opisują kształt obiektów. Interfejsy mogą być łączone (declaration merging — ponowne zadeklarowanie dodaje pola) i rozszerzane (extends). Aliasy typów mogą opisywać union, intersection, tuple i typy warunkowe, ale nie obsługują declaration merging. Zasada: używaj interface dla obiektów API, type — dla wszystkiego innego.

// Interfejsy i typy dla React Native
// Interface z opcjonalnymi polami
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // pole opcjonalne
  readonly createdAt: Date; // tylko do odczytu
}

// Rozszerzanie interfejsu (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

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

// Typy użytkowe — Partial czyni wszystkie pola opcjonalnymi
type PartialUser = Partial<User>;

// Pick — wybiera określone pola
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — słownik z typowanymi kluczami
type UserMap = Record<string, User>;

Interfejs User z ? (pole opcjonalne) i readonly (tylko do odczytu). ApiResponse<T> — interfejs generyczny dla odpowiedzi API. Partial<User> — typ użytkowy, który czyni wszystkie pola opcjonalnymi (przydatne dla formularzy edycji). Pick<User, 'id' | 'name'> wybiera tylko określone pola — wygodne dla komponentów podglądu. Record<string, User> — słownik użytkowników po ID.

Generyki i typy użytkowe

Generyki — jedna z kluczowych funkcji TypeScript, pozwalająca tworzyć komponenty działające z dowolnymi typami bez utraty bezpieczeństwa typów. Funkcja generyczna jest definiowana z parametrem typu w nawiasach ostrych: function identity<T>(arg: T): T. Typ T jest wywnioskowany automatycznie z argumentu lub określony jawnie: identity<string>('hello').

Typy użytkowe — wbudowane generyki do transformacji typów: Partial<T> (wszystkie pola opcjonalne), Required<T> (wszystkie pola wymagane), Readonly<T> (wszystkie pola tylko do odczytu), Pick<T, K> (wybór pól), Omit<T, K> (pomijanie pól), Record<K, T> (słownik), Exclude<T, U> (pomijanie union), Extract<T, U> (wyodrębnianie union), NonNullable<T> (pomijanie null/undefined).

// Generyki w TypeScript
// Funkcja generyczna do pracy z 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>;
}

// Użycie z konkretnym typem
interface Product {
  id: number;
  title: string;
  price: number;
}

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

// Klasa generyczna do zarządzania stanem
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 };
  }
}

// Typowana praca z 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>>;

Funkcja fetchData<T> — typowane opakowanie fetch. Parametr T określa kształt odpowiedzi: przy wywołaniu fetchData<Product[]> TypeScript wie, że zwrócona tablica zawiera obiekty Product. Klasa StateManager<S> zarządza stanem dowolnego typu — Partial<S> do częściowej aktualizacji. Action<T, P> — discriminated union dla akcji Redux z automatycznym zawężaniem typu w switch.

TypeScript w React Native

TypeScript w React Native zapewnia ścisłe typowanie propsów i stanu komponentów. React Native CLI tworzy szablon z rozszerzeniem .tsx i tsconfig.json. PropTypes (JS) są zastępowane przez interfejsy TypeScript — sprawdzanie jest wykonywane na etapie kompilacji, a nie w uruchomieniu. styled-components i React Navigation mają pełne typy.

Typowanie komponentu

React.FC<Props> — typ komponentu funkcyjnego z propsami. Dzieci (children) są automatycznie typowane. useRef<T> — odwołanie do komponentu natywnego. useState<S> — stan z wnioskowaniem typu. useNavigation<T> — typowana nawigacja. useCallback, useMemo — z automatycznym wnioskowaniem typów. Wszystkie hooki React są w pełni typowane.

// Typowany komponent React Native
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 dla nawigacji i danych
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

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

// Interfejs dla propsów
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// Typowany komponent funkcyjny
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 — słownik tras z ich parametrami. NavigationProp — typowana nawigacja: navigation.navigate('Profile', { userId }) sprawdza, że Profile przyjmuje userId. useCallback z typowanymi parametrami zapobiega niepotrzebnym przerenderowaniom. FlatList jest typowany przez generyk: — data i renderItem otrzymują typy automatycznie.

Narzędzia programisty TypeScript

Narzędzia TypeScript obejmują kompilator tsc, tsconfig.json, wsparcie IDE w VS Code, ESLint z @typescript-eslint, Prettier i DefinitelyTyped (@types/*). tsc — kompilator przekształcający .ts w .js. tsconfig.json — konfiguracja: target (ES2020), module (ESNext), strict: true, outDir (folder wyjściowy). sourceMap — debugowanie TS w przeglądarce przez mapy kodu.

DefinitelyTyped — repozytorium z typizacjami dla bibliotek bez wbudowanych typów. Instalacja: npm install @types/react @types/react-native --save-dev. Pliki .d.ts — deklaracje typów. Nowoczesne biblioteki (React, React Native, Angular) zawierają wbudowane typy i nie wymagają @types/. Dla starych bibliotek JS DefinitelyTyped jest jedynym źródłem typów.

// tsconfig.json — minimalna konfiguracja
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // tylko sprawdzanie, bez generowania JS
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

Opcja strict: true włącza wszystkie sprawdzenia typów — zalecana dla wszystkich projektów. jsx: 'react-native' zachowuje JSX bez transformacji (React Native przetwarza JSX przez Babel). moduleResolution: 'node' — wyszukiwanie modułów jak w Node.js. esModuleInterop — kompatybilność z modułami CommonJS. noEmit: true — tylko sprawdzanie bez generowania plików JS (Babel lub Metro generują JS).