Czego się dziś nauczysz

Problem, który rozwiązuje TypeScript

Wyobraź sobie sklepik szkolny. Kasjer wpisuje w formularzu liczbę sprzedanych drożdżówek, a program ma policzyć, ile pieniędzy jest w kasie. W czystym JavaScripcie taki kod wygląda niewinnie:

// dane z formularza zawsze przychodzą 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 rozwiązuje to w jeden sposób: każe ci powiedzieć, jakiego rodzaju dane trzymasz, a potem pilnuje, żebyś się tego trzymał. Ten sam kod w TypeScripcie w ogóle się nie skompiluje:

const liczbaSztuk: string = "12";
const razemSztuk = liczbaSztuk + 5;
// Błąd: Operator '+' cannot be applied to types 'string' and 'number'.

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 to nadzbiór JavaScriptu. Oznacza to, że każdy poprawny program w JavaScripcie jest jednocześnie poprawnym programem w TypeScripcie — wystarczy zmienić rozszerzenie pliku z .js na .ts. TypeScript tylko dokłada do języka nowe elementy: przede wszystkim zapis typów.

Przeglądarka nie rozumie TypeScriptu

Żadna przeglądarka ani Node.js nie potrafi uruchomić pliku .ts. Zanim to nastąpi, kod musi przejść przez kompilator (program o nazwie tsc), który sprawdza typy i zamienia kod na zwykły JavaScript:

  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: 139.60 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.