Co to jest TypeScript? Wprowadzenie z przykładami

TypeScript to JavaScript ze statycznymi typami. Dodajesz adnotacje typów do zmiennych, parametrów i wartości zwracanych, kompilator TypeScriptu sprawdza je, zanim program się uruchomi, a potem generuje zwykły JavaScript bez typów. Ten JavaScript działa wszędzie tam, gdzie działa JavaScript: w przeglądarkach, Node.js, Deno i Bun.

Oto mały program w TypeScripcie. Kliknij Run.

interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const ada: User = { name: "Ada", age: 36 };
console.log(describe(ada));

const scores: number[] = [90, 72, 85];
const total = scores.reduce((sum, s) => sum + s, 0); // total is inferred as number
console.log(total / scores.length);

Wynik:

Ada is 36 years old
82.33333333333333

Poza fragmentami po dwukropkach (: string, : User, : number[]) i interface to jest JavaScript. Te dodatki mówią kompilatorowi, czym może być każda wartość. Zwróć uwagę, że total nie ma adnotacji: TypeScript sam ustala, że to liczba. Większość kodu w TypeScripcie opisuje typami granice funkcji, a resztę zostawia kompilatorowi do wywnioskowania.

Co wyłapuje type checker

Adnotacje są po to, żeby błędy wychodziły na jaw w trakcie pisania kodu, a nie wtedy, gdy trafi na nie użytkownik. Uruchom ten blok i przeczytaj wynik:

// This does not compile: two mistakes the compiler finds before anything runs.
interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const grace: User = { name: "Grace", age: "85" };
console.log(describe({ name: "Linus" }));

Program w ogóle się nie uruchamia. Zamiast tego kompilator wypisuje dwa błędy:

index.ts(11,38): error TS2322: Type 'string' is not assignable to type 'number'.
index.ts(12,22): error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'User'.

Każdy błąd podaje plik, wiersz i kolumnę, kod błędu (TS2322) oraz to, co jest nie tak. W czystym JavaScripcie obie linie by się wykonały, a druga wypisałaby Linus is undefined years old bez żadnego ostrzeżenia. W edytorze takim jak VS Code te same błędy pojawiają się jako czerwone podkreślenia już podczas pisania, razem z autouzupełnianiem, które wie, że user ma dokładnie name i age.

Typowe błędy, które wyłapuje type checker:

• Literówka w nazwie właściwości lub metody (user.nmae, list.lenght).
• Wywołanie funkcji ze zbyt małą lub zbyt dużą liczbą argumentów albo z argumentami złego typu.
• Użycie wartości, która może być null lub undefined, bez wcześniejszego sprawdzenia.
• Pominięcie jednego przypadku unii, np. "loading" | "done" | "error", gdy kod używa sprawdzenia wyczerpującego.
• Kod, który przestaje działać, gdy funkcja, z której korzysta, zmienia sygnaturę.

Typy znikają w czasie działania programu

Typy TypeScriptu istnieją tylko podczas kompilacji. Kompilator je sprawdza, a potem usuwa: generowany JavaScript nie ma adnotacji ani interfejsów i działa dokładnie tak jak JavaScript napisany ręcznie.

Ten kod wejściowy:

function double(n: number): number {
    return n * 2;
}

zamienia się w taki wynik:

function double(n) {
    return n * 2;
}

Dlatego TypeScript nie sprawdzi wartości, które pojawiają się dopiero w trakcie działania programu. Tutaj tekst JSON udaje obiekt User, kompilator musi w to uwierzyć i w czasie działania też nic nie protestuje:

interface User {
    name: string;
    age: number;
}

const json = '{"name": "Ada", "age": "thirty-six"}';
const user: User = JSON.parse(json); // JSON.parse returns any, so this is accepted

console.log(typeof user.age); // string, even though the type says number
console.log(user.age + 1);    // string concatenation, not addition

Wynik:

string
thirty-six1

Dane spoza programu (odpowiedzi API, dane z formularzy, pliki) wymagają sprawdzenia w czasie działania, na przykład funkcją type guard, która bada wartość. TypeScript ufa wtedy temu sprawdzeniu i sam zawęża typ.

Kto stworzył TypeScript i po co

TypeScript powstał w Microsofcie, a jego projektem kierował Anders Hejlsberg (twórca C#). Został udostępniony publicznie w październiku 2012 roku jako wersja 0.8, a wersja 1.0 ukazała się w kwietniu 2014 roku. Jest open source na licencji Apache 2.0 i rozwijany na GitHubie. Według liczby miesięcznych kontrybutorów liczonej przez GitHub TypeScript stał się w sierpniu 2025 roku najczęściej używanym językiem na GitHubie, przed Pythonem i JavaScriptem.

Motywacją były duże bazy kodu w JavaScripcie. JavaScript nie pozwala powiedzieć „ta funkcja przyjmuje obiekt użytkownika”, więc zmiana nazwy właściwości albo zmiana funkcji oznaczała przeszukiwanie całego kodu i nadzieję, że testy obejmują każde wywołanie. TypeScript dodaje tę informację, zachowując pełną zgodność z JavaScriptem:

• Jest nadzbiorem. Poprawny JavaScript to poprawna składnia TypeScriptu, więc projekt można przenosić plik po pliku.
• Idzie za JavaScriptem. Poza kilkoma wczesnymi dodatkami, takimi jak enum i namespace, TypeScript nie wprowadza własnych funkcji działających w runtime; nowa składnia pochodzi ze standardu JavaScriptu.
• Typy nic nie kosztują w czasie działania. Są usuwane, więc wynik jest tak samo szybki jak ręcznie napisany JavaScript.

Obecna główna wersja to TypeScript 7, którego kompilator przepisano w Go jako program natywny. Sprawdza typy w dużych projektach mniej więcej dziesięć razy szybciej niż zastąpiony przez niego kompilator napisany w JavaScripcie. Co się zmieniło, opisuje strona o TypeScript 7.

Do czego służy TypeScript? Frontend i backend

TypeScript służy do pisania tego samego oprogramowania co JavaScript, zarówno na frontendzie, jak i na backendzie. Ponieważ wynikiem jest JavaScript, TypeScript trafia wszędzie tam, gdzie JavaScript:

Ten sam język obsługuje obie strony aplikacji webowej, dlatego wiele zespołów współdzieli definicje typów (na przykład kształt odpowiedzi API) między kodem serwera a kodem przeglądarki.

Jak kod TypeScript staje się JavaScriptem

To dwa osobne zadania i zajmują się nimi różne narzędzia:

1. Sprawdzanie typów. Robi to tylko kompilator TypeScriptu, zwykle jako polecenie tsc (deno check w Deno uruchamia kopię tego samego kompilatora). Czyta twoje pliki .ts, zgłasza błędy i domyślnie zapisuje też pliki .js.
2. Usuwanie typów. Może to zrobić tsc, ale też szybsze narzędzia, które w ogóle pomijają sprawdzanie typów: esbuild, SWC, Babel oraz wbudowane usuwanie typów (type stripping) w Node.js, Deno i Bun.

Popularny układ to szybkie narzędzie do uruchamiania kodu i tsc --noEmit (tylko sprawdzanie, bez zapisywania plików) w edytorze i w CI. Instalacja tsc i uruchamianie pliku .ts mają w tym rozdziale osobne strony.

Najważniejsze funkcje w jednym przykładzie

Codzienny TypeScript korzysta z niewielkiego zestawu funkcji. Ten blok zbiera najważniejsze z nich:

type Status = "active" | "banned"; // a union of two string values

interface Account {
    id: number;
    name: string;
    status: Status;
    email?: string; // optional: may be missing
}

// A generic function: T is filled in from the argument
function first<T>(items: T[]): T | undefined {
    return items[0];
}

const accounts: Account[] = [
    { id: 1, name: "Ada", status: "active", email: "ada@example.com" },
    { id: 2, name: "Linus", status: "banned" },
];

const account = first(accounts); // inferred as Account | undefined
if (account !== undefined) {
    console.log(account.name, account.email ?? "no email"); // narrowed to Account
}

for (const a of accounts) {
    console.log(a.status === "active" ? `${a.name} can log in` : `${a.name} is banned`);
}

Wynik:

Ada ada@example.com
Ada can log in
Linus is banned

• Adnotacje typów (name: string) określają, co przechowuje zmienna, parametr, właściwość lub wartość zwracana.
• Wnioskowanie typów uzupełnia typy, które pomijasz: account dostaje typ od tego, co zwraca first.
• Interfejsy i aliasy typów (interface Account, type Status) nadają nazwy kształtowi twoich danych.
• Typy unii ("active" | "banned", T | undefined) opisują wartość, która jest jedną z kilku możliwości.
• Zawężanie (narrowing): po sprawdzeniu takim jak account !== undefined kompilator wie, który przypadek zachodzi wewnątrz bloku.
• Właściwości opcjonalne (email?: string) mogą nie istnieć, więc ich typ obejmuje undefined.
• Generyki (first<T>) pozwalają jednej funkcji lub jednemu typowi działać z wieloma typami i zachować powiązanie między nimi: na wejściu tablica Account, na wyjściu Account.

Czy najpierw trzeba poznać JavaScript?

To pomaga, ale możesz uczyć się obu naraz. Wszystko, co decyduje o zachowaniu kodu TypeScript w czasie działania (zmienne, funkcje, obiekty, tablice, promise'y, klasy), to JavaScript, a TypeScript dokłada warstwę, która te wartości opisuje. Jeśli znasz już JavaScript, nowością jest system typów: adnotacje, interfejsy, unie, generyki i zawężanie. Jeśli oba języki są dla ciebie nowe, zacznij od podstaw wartości i funkcji w JavaScripcie, a typy dodawaj stopniowo; komunikaty błędów kompilatora dobrze uczą, bo wskazują dokładny wiersz, w którym wartość jest użyta niewłaściwie.

Praktyczna kolejność nauki TypeScriptu: zainstaluj go i uruchom pierwszy plik, poznaj typy podstawowe i typy obiektów, potem typy unii i zawężanie, a następnie funkcje i generyki. To obejmuje większość kodu aplikacji.