Dlaczego TypeScript? Problemy JavaScriptu i jak je rozwiązuje

Po tej lekcji będziesz wiedzieć, jakie błędy JavaScriptu TypeScript wyłapuje przed uruchomieniem programu, a jakich nie wyłapie nigdy. Zobaczysz też, jak wygląda praca z kompilatorem na przykładzie, który będzie Ci towarzyszyć przez cały kurs.

Aktualne na: październik 2026.

Przykład na cały kurs: Herbaciarnia Liść

Przez wszystkie moduły pracujesz na jednym, fikcyjnym projekcie: sklepie internetowym Herbaciarnia Liść z Gdańska. Sklep przyjmuje zamówienia na herbaty i akcesoria, liczy wartość koszyka, nalicza VAT, wystawia faktury firmom z NIP i wysyła paczki kurierem albo wydaje je przy odbiorze osobistym. To mały system, ale ma wszystko, na czym JavaScript lubi się potknąć: kwoty, statusy, dane od klientów i dane z zewnętrznych usług.

Kwoty trzymamy w groszach jako liczby całkowite (1990 zamiast 19.90), bo w JavaScripcie 0.1 + 0.2 daje 0.30000000000000004. Złote pokazujemy dopiero przy wyświetlaniu. To nie jest wymóg TypeScriptu, tylko dobra praktyka przy pieniądzach, a TypeScript pomoże jej pilnować.

Co poszło nie tak w JavaScripcie

Spójrz na funkcję, która liczy podatek od wartości netto. Napisano ją w czystym JavaScripcie:

JavaScript

function obliczVat(nettoGr, stawka) {
  return Math.round(nettoGr * stawka / 100);
}

obliczVat("4990", 23);   // 1148, działa przypadkiem: tekst zamienił się na liczbę
obliczVat(4990);         // NaN, bo stawka jest undefined
obliczVat(4990, "23%");  // NaN

Program się nie zatrzyma. Drugi i trzeci wynik to NaN, które pojedzie dalej do sumy koszyka, potem na fakturę, a na końcu do klienta. JavaScript sprawdza typy dopiero w chwili wykonania, i to bardzo łagodnie: zamiast błędu dostajesz cichą konwersję albo NaN.

Ta sama funkcja w TypeScripcie:

TypeScript

type StawkaVat = 23 | 8 | 5 | 0;

function obliczVat(nettoGr: number, stawka: StawkaVat): number {
  return Math.round((nettoGr * stawka) / 100);
}

obliczVat(4990, 23);     // 1148
obliczVat("4990", 23);   // błąd TS2345: 'string' nie pasuje do 'number'
obliczVat(4990);         // błąd TS2554: oczekiwano 2 argumentów, podano 1
obliczVat(4990, 22);     // błąd TS2345: 22 nie jest dozwoloną stawką

Kompilator zgłasza trzy błędy, zanim ktokolwiek uruchomi kod. Ostatni jest najciekawszy: typ StawkaVat dopuszcza tylko cztery wartości, więc literówka w stawce nie przejdzie. Stawki 23% i 8% wynikają dziś z art. 146ef ustawy o VAT, a 5% i 0% z art. 41 (stan na październik 2026). Gdy przepisy się zmienią, zmieniasz jeden typ, a kompilator wskaże każde miejsce, które trzeba poprawić.

Czym właściwie jest TypeScript

TypeScript to JavaScript z dopisanymi typami. Rozwija go Microsoft jako projekt open source. Składa się z trzech części:

języka, czyli składni typów: adnotacje : number, aliasy type, interfejsy, generyki;
kompilatora tsc, który sprawdza typy i może zamienić plik .ts na .js;
usługi językowej, z której korzysta edytor: podpowiedzi, podkreślenia błędów, bezpieczna zmiana nazw.

Najważniejsza zasada: typy istnieją tylko w czasie pisania i sprawdzania kodu. Po kompilacji albo po uruchomieniu pliku .ts w Node.js adnotacje znikają i zostaje zwykły JavaScript. Nazywa się to wymazywaniem typów (ang. type erasure). Dlatego TypeScript nie spowolni programu i nie sprawdzi za Ciebie danych, które przychodzą z formularza albo z API w czasie działania. Tym zajmiesz się w modułach 2 i 7.

Stan na październik 2026 najnowsza stabilna wersja to TypeScript 7.0.2. Wersja 7.0, ogłoszona 8 lipca 2026, to natywny port kompilatora. Według zespołu TypeScript pełne sprawdzanie dużych projektów jest typowo od 8 do 12 razy szybsze niż w wersji 6.0. Język dla Ciebie się nie zmienia: piszesz te same typy, a polecenie nadal nazywa się tsc.

Droga kodu TypeScript od edytora do działającego programu

Na podstawie dokumentacji TypeScript i Node.js, stan na październik 2026.

Czego TypeScript nie zrobi

Uczciwie trzeba powiedzieć, gdzie kończy się ochrona:

Nie sprawdzi danych z zewnątrz. Jeśli serwer zwróci { "cena": "19,90" }, a Ty napiszesz, że cena to number, kompilator Ci uwierzy. Walidację danych w czasie działania musisz napisać sam albo użyć biblioteki.
Nie znajdzie błędów logiki. Rabat 10% policzony jako cena * 10 zamiast cena * 0.9 ma poprawne typy.
Da się go wyłączyć. Typ any i rzutowanie as mówią kompilatorowi „nie sprawdzaj”. W kursie nauczysz się, jak ich unikać.

Kiedy wychodzi błąd: JavaScript i TypeScript

TypeScript przesuwa część błędów na czas pisania kodu, ale nie zastępuje walidacji i testów.

Ćwiczenie praktyczne

Poniżej masz fragment koszyka Herbaciarni Liść w czystym JavaScripcie. Bez uruchamiania kodu wypisz, które wywołania dałyby zły wynik i który z nich TypeScript wyłapałby po dodaniu typów (cenaGr: number, ilosc: number).

JavaScript

function wartoscPozycji(cenaGr, ilosc) {
  return cenaGr * ilosc;
}
wartoscPozycji(3490, 2);
wartoscPozycji("3490", "2");
wartoscPozycji(3490);
wartoscPozycji(34.9, 2);

Rozwiązanie: pierwsze wywołanie daje poprawne 6980 gr. Drugie zwraca 6980 przypadkiem, bo mnożenie zamienia teksty na liczby; TypeScript zgłosi błąd TS2345 przy pierwszym argumencie (tekst w miejscu liczby), a po jego poprawieniu taki sam przy drugim. Trzecie daje NaN, a TypeScript zgłosi TS2554 (brak argumentu). Czwarte ma poprawne typy, bo 34.9 to number, więc kompilator go nie wyłapie, choć to cena w złotych zamiast w groszach i wynik 69.8 jest błędny. To przykład błędu logiki: pomoże tu nazwa parametru, test albo osobny typ dla groszy, który poznasz w module 3.

Najważniejsze w 3 punktach

TypeScript to JavaScript z typami: kompilator tsc sprawdza je przed uruchomieniem, a potem typy znikają.
Typ może ograniczać wartości do konkretnej listy, np. 23 | 8 | 5 | 0, więc literówka w stawce VAT nie przejdzie.
TypeScript nie sprawdza danych z zewnątrz ani logiki programu; do tego potrzebujesz walidacji i testów.

Źródła

TypeScript Handbook, The Basics i Everyday Types: https://www.typescriptlang.org/docs/handbook/2/basic-types.html
Announcing TypeScript 7.0, Microsoft DevBlogs, 8.07.2026: https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/
Rejestr npm, pakiet typescript (wersja 7.0.2, stan na 18.10.2026): https://www.npmjs.com/package/typescript
Ustawa o podatku od towarów i usług, t.j. Dz.U. 2026 poz. 1263, art. 41 i art. 146ef: https://api.sejm.gov.pl/eli/acts/DU/2026/1263
MDN, Number (dokładność liczb zmiennoprzecinkowych): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number