Czym jest TypeScript i po co go używać

Czego się dziś nauczysz

Problem, który rozwiązuje TypeScript

Wyobraź sobie sklepik szkolny. Liczba sprzedanych drożdżówek została odczytana jako tekst, a program ma obliczyć wartość zakupów. Poniższy przykład to JavaScript: zapisz go w osobnym pliku sklepik.js i uruchom node sklepik.js.

// Symulujemy liczbę sztuk odczytaną jako tekst.
const liczbaSztuk = "12";
const cena = 3.5;

const doZaplaty = liczbaSztuk * cena;   // 42 — działa
const razemSztuk = liczbaSztuk + 5;     // ...a to?

console.log(doZaplaty);
console.log(razemSztuk);

42
125

Pierwsza linia zadziałała, bo przy mnożeniu JavaScript sam zamienił tekst na liczbę. Przy dodawaniu zrobił jednak coś innego: skleił napis "12" z liczbą 5 i wyszło "125". Program się nie wysypał, nie wyświetlił żadnego ostrzeżenia — po prostu policzył źle. Taki błąd znajdziesz dopiero wtedy, gdy ktoś zgłosi, że stan magazynu się nie zgadza.

TypeScript może wykryć, że wynik nie pasuje do oczekiwanego typu. Samo "12" + 5 jest dozwolone również w TypeScripcie i daje tekst. Błąd pojawi się, gdy jawnie wymagamy liczby:

const liczbaSztuk: string = "12";
const razemSztuk: number = liczbaSztuk + 5;
// TS2322: wyniku string nie można przypisać do number.
// Poprawka: const razemSztuk = Number(liczbaSztuk) + 5;

Redaktor kodu podkreśli tę linię na czerwono, zanim jeszcze uruchomisz program. Błąd znaleziony w trakcie pisania kosztuje minutę. Ten sam błąd znaleziony przez użytkownika kosztuje dużo więcej.

Jak to działa

TypeScript rozszerza składnię JavaScriptu o opisy typów i inne konstrukcje. Kod JavaScript może po przeniesieniu do pliku .ts zgłaszać błędy typów — zmiana rozszerzenia nie gwarantuje bezbłędnej kompilacji.

Przeglądarka nie rozumie TypeScriptu

W tym kursie używamy tsc: sprawdzamy typy i kompilujemy kod do JavaScriptu, a następnie uruchamiamy go w konsoli Node.js. Nowe wersje Node potrafią również usuwać część składni typów i uruchamiać .ts, ale nie sprawdzają wtedy typów i nie obsługują wszystkich konstrukcji. Dlatego zachowujemy osobny etap kompilacji.

  sklepik.ts                  tsc                   sklepik.js
 ┌────────────┐         ┌──────────────┐         ┌────────────┐
 │ kod z      │  ────>  │ 1. sprawdza  │  ────>  │ czysty JS  │  ────>  przeglądarka
 │ typami     │         │    typy      │         │ bez typów  │          / Node.js
 └────────────┘         │ 2. usuwa je  │         └────────────┘
                        └──────────────┘
                               │
                               └──> błędy typów wypisane w terminalu

Zwróć uwagę na krok drugi: kompilator usuwa wszystkie informacje o typach. W gotowym pliku .js nie ma po nich śladu. Typy istnieją wyłącznie na czas pisania i sprawdzania kodu — dlatego mówimy, że TypeScript daje statyczną kontrolę typów.

// piszesz w TypeScripcie:
function powitaj(imie: string): string {
  return "Cześć, " + imie + "!";
}

// kompilator produkuje JavaScript:
function powitaj(imie) {
  return "Cześć, " + imie + "!";
}

Sklepik szkolny — wersja z typami

Zobacz ten sam program napisany porządnie. Nie musisz jeszcze rozumieć każdego zapisu — w kolejnych lekcjach omówimy je po kolei. Na razie zwróć uwagę na to, ile informacji o programie da się wyczytać z samego kodu.

// 1. Opis pojedynczego produktu w sklepiku
type Produkt = {
  nazwa: string;
  cena: number;
  sztuk: number;
};

// 2. Nasz asortyment
const asortyment: Produkt[] = [
  { nazwa: "drożdżówka", cena: 3.5, sztuk: 12 },
  { nazwa: "sok",        cena: 2.8, sztuk: 20 },
  { nazwa: "kanapka",    cena: 6.0, sztuk: 7  }
];

// 3. Funkcja, która liczy wartość całego towaru
function wartoscMagazynu(produkty: Produkt[]): number {
  let suma = 0;
  for (const p of produkty) {
    suma = suma + p.cena * p.sztuk;
  }
  return suma;
}

// 4. Wypisanie wyniku
const wartosc = wartoscMagazynu(asortyment);
console.log("Wartość towaru: " + wartosc.toFixed(2) + " zł");

Wartość towaru: 140.00 zł

Co tu się dzieje, fragment po fragmencie

Gdzie spotkasz TypeScript

Innymi słowy: ucząc się TypeScriptu, uczysz się jednocześnie JavaScriptu. Wszystkie zmienne, pętle, funkcje, klasy i tablice działają dokładnie tak samo — dochodzi tylko warstwa opisu typów.

Cztery nieporozumienia, które warto od razu wyprostować

Zadania

Do tej lekcji nie potrzebujesz komputera z zainstalowanym środowiskiem — wystarczy kartka albo edytor tekstu. Środowisko postawimy w lekcji 2.

const oceny = ["5", "4", "3"];
let suma = 0;
for (const ocena of oceny) {
  suma += ocena;
}
console.log("Suma ocen: " + suma);

Suma ocen: 0543

function czyZdal(punkty: number, prog: number): boolean

type Uczen = {
  imie: string;
  nazwisko: string;
  klasa: string;
  srednia: number;
  wSamorzadzie: boolean;
};

Co trzeba zapamiętać

• TypeScript = JavaScript + opis typów sprawdzany przed uruchomieniem programu.
• Typ podaje się po dwukropku: const cena: number = 3.5;
• Kompilator tsc sprawdza typy i zamienia plik .ts na .js.
• Po kompilacji typy znikają — nie chronią przed błędnymi danymi w czasie działania programu.
• Największe zyski: wcześnie wykryte pomyłki, podpowiedzi edytora i czytelność cudzego kodu.