TypeScript — co to jest i jak działa?

TypeScript to statycznie typowany JavaScript od Microsoft. Poznaj system typów, interface vs type, generics, utility types i jak skonfigurować projekt.

Czym jest TypeScript?

TypeScript to superset JavaScript stworzony przez Microsoft — każdy kod JavaScript jest prawidłowym kodem TypeScript. TypeScript dodaje opcjonalne statyczne typowanie, które pozwala wykrywać błędy podczas pisania kodu (w IDE), nie podczas uruchomienia w produkcji.

TypeScript kompiluje się do czystego JavaScript (tsc — TypeScript Compiler). Wynikowy JS działa w każdej przeglądarce i środowisku Node.js — bez dodatkowych zależności runtime. Stopniowa adopcja: możesz zacząć dodawać typy do istniejącego projektu JS.

2012

Rok premiery TypeScript 0.8 od Microsoft. TS 1.0 w 2014 r.

#1 JS Superset

Najpopularniejszy język do pisania aplikacji JavaScript. Używany w 65%+ projektów JS (wg Stack Overflow 2023)

strict mode

Tryb strict: true w tsconfig aktywuje pełne sprawdzanie typów — zalecane dla nowych projektów

System typów TypeScript

Prymitywne

string

const name: string = 'Jan';

number

const age: number = 30;

boolean

const active: boolean = true;

null / undefined

const x: null = null;

any

let val: any = 'anything'; // unikaj!

unknown

let input: unknown; // bezpieczniejsze niż any

never

function fail(): never { throw new Error(); }

void

function log(): void { console.log('hi'); }

Złożone

Array

const nums: number[] = [1, 2, 3];

Tuple

const pair: [string, number] = ['age', 30];

Object

const user: { name: string; age: number } = {...};

Union

type ID = string | number;

Intersection

type AdminUser = User & Admin;

Literal

type Direction = 'left' | 'right' | 'up' | 'down';

Enum

enum Status { Active, Inactive, Pending }

Generics

function wrap<T>(val: T): T[] { return [val]; }

Interface vs Type Alias

Interface

// Interface — kształt obiektu
interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

// Rozszerzanie interface
interface Admin extends User {
  permissions: string[];
}

// Declaration merging (dodaje pola do istniejącego interfejsu)
interface User {
  createdAt: Date; // dołączone do oryginalnego User
}

Type Alias

// Type alias — elastyczniejszy
type UserID = string | number;

// Union type
type Status = 'active' | 'inactive' | 'pending';

// Intersection
type AdminUser = User & {
  permissions: string[];
};

// Mapped type
type Optional<T> = {
  [K in keyof T]?: T[K];
};

// Conditional type
type NonNullable<T> = T extends null | undefined ? never : T;

Utility Types TypeScript

Partial<T>

Wszystkie pola T opcjonalne

Partial<User> — { name?: string; email?: string }

Required<T>

Wszystkie pola T wymagane

Required<Config> — usuwa ? ze wszystkich pól

Readonly<T>

Wszystkie pola T readonly

const user: Readonly<User> = {...} — niemodyfikowalny

Pick<T, K>

Wybierz podzbiór pól

Pick<User, 'id' | 'name'> — tylko id i name

Omit<T, K>

Pomiń wybrane pola

Omit<User, 'password'> — User bez hasła

Record<K, V>

Mapa klucz-wartość

Record<string, number> — { likes: 5, shares: 3 }

Exclude<T, U>

Wyklucz typy z unii

Exclude<string | number | null, null> — string | number

ReturnType<F>

Typ zwracany przez funkcję

ReturnType<typeof fetchUser> — Promise<User>

FAQ — TypeScript

Co to jest TypeScript?

TypeScript to open-source'owy, statycznie typowany superset JavaScript stworzony przez Microsoft (Anders Hejlsberg) i wydany w 2012 roku. TypeScript kompiluje się do czystego JavaScript — każdy kod JS jest prawidłowym kodem TS. Dodaje optional static typing, interfaces, enums, generics, decorators i inne funkcje. Dzięki typom IDE oferuje zaawansowane autocomplete, refactoring i wykrywanie błędów przed uruchomieniem. TypeScript jest domyślnym językiem w Angular i rekomendowanym w React, Vue, Node.js.

Jakie są korzyści z TypeScript?

Główne korzyści TypeScript: wykrywanie błędów w czasie kompilacji (nie runtime) — brak 'undefined is not a function' w produkcji; lepsze IDE support (IntelliSense, autocomplete, navigation) przyspiesza development; dokumentacja przez typy — interfejsy opisują kształt danych; bezpieczny refactoring — zmiana nazwy funkcji/pola automatycznie we wszystkich miejscach; łatwiejsza współpraca w zespołach — typy komunikują kontrakty między komponentami; stopniowa adopcja — można zacząć od .ts bez typów i dodawać je stopniowo.

Czym różni się interface od type w TypeScript?

Interface i type są często wymienne, ale mają różnice: Interface — może być rozszerzany przez inne interfejsy (extends), może być łączony (declaration merging — dwie deklaracje tego samego interfejsu scalają się), najlepszy dla definiowania kształtu obiektów i klas. Type alias — może reprezentować prymitywy, union types (string | number), intersection types (&), tuple, mapped types — bardziej elastyczny. Konwencja: Interface dla API publicznego (klas, Props w React), type dla złożonych type expressions, union i utility types.

Co to są Generics w TypeScript?

Generics to mechanizm tworzenia wielokrotnego użytku komponentów które działają z różnymi typami. Zamiast pisać funkcję dla string i osobną dla number — piszesz jedną generyczną. Przykład: function identity<T>(arg: T): T { return arg; }. Wywołanie: identity<string>('hello') lub z type inference: identity(42). Generics używane szeroko w: funkcjach, klasach, interfejsach, utility types (Array<T>, Promise<T>, Record<K,V>). Pozwalają uniknąć any bez powielania kodu.

Jak skonfigurować TypeScript w projekcie?

Konfiguracja TypeScript: npm install -D typescript, npx tsc --init (generuje tsconfig.json). Kluczowe opcje tsconfig: strict: true (włącza wszystkie strict checks — zalecane), target: 'ES2020' (wersja JS na output), module: 'ESNext' lub 'CommonJS', lib: ['DOM', 'ES2020'] (dostępne typy), paths (aliasy importów np. @/). Dla React: npm install -D @types/react @types/react-dom. Dla Node.js: npm install -D @types/node. ts-node do uruchamiania TS bez kompilacji.

Czytaj dalej