Czego się dziś nauczysz

Node.js — silnik, na którym to wszystko stoi

Node.js pozwala uruchamiać JavaScript poza przeglądarką, prosto z terminala. Kompilator TypeScriptu sam jest programem napisanym w JavaScripcie, więc bez Node.js się nie obejdzie.

Pobierz wersję LTS ze strony nodejs.org i zainstaluj ją, zostawiając ustawienia domyślne. Potem otwórz terminal (w Windows: Terminal lub Wiersz polecenia) i sprawdź, czy wszystko się udało:

node -v
npm -v

v22.11.0
10.9.0

Numery u ciebie będą inne i to normalne — ważne, żeby pojawiły się dwa numery wersji, a nie komunikat o nierozpoznanym poleceniu. Razem z Node.js instaluje się npm, czyli menedżer pakietów: to nim za chwilę pobierzemy kompilator.

Zakładamy projekt

Utwórz gdzieś na dysku folder kurs-ts i otwórz go w VS Code (Plik → Otwórz folder). Następnie otwórz wbudowany terminal skrótem Ctrl + ` i wykonaj po kolei trzy polecenia:

npm init -y
npm install --save-dev typescript
npx tsc --version

tsconfig.json — instrukcja dla kompilatora

Kompilator musi wiedzieć, gdzie szukać kodu, dokąd zapisywać wynik i jak surowo sprawdzać typy. Wszystko to opisuje plik tsconfig.json. Wygeneruj go poleceniem:

npx tsc --init

Powstanie plik z kilkudziesięcioma opcjami — prawie wszystkie są wyłączone komentarzem. Nie musisz ich teraz czytać. Zamiast tego zaznacz całą zawartość i zastąp ją tym zestawem, który będzie nam służył przez cały kurs:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "noUnusedLocals": true,
    "sourceMap": true
  },
  "include": ["src/**/*"]
}

Pierwszy program

Utwórz folder src, a w nim plik index.ts. Struktura projektu wygląda tak:

kurs-ts/
 ├─ node_modules/      ← pobrane narzędzia (nie ruszamy)
 ├─ src/
 │   └─ index.ts       ← tu piszesz
 ├─ dist/              ← tu kompilator zapisze .js (powstanie sam)
 ├─ package.json
 └─ tsconfig.json

Nie zaczynamy od zwykłego „Hello world” — napiszmy coś, co od razu pokazuje sens typów. Program przelicza punkty z egzaminu zawodowego na wynik procentowy i informację o zdaniu:

// Wynik egzaminu zawodowego — część pisemna
const maksPunktow: number = 40;
const zdobytePunkty: number = 31;
const progZdawalnosci: number = 50;   // w procentach

const procent: number = (zdobytePunkty / maksPunktow) * 100;
const zdany: boolean = procent >= progZdawalnosci;

console.log("Punkty:  " + zdobytePunkty + " / " + maksPunktow);
console.log("Wynik:   " + procent.toFixed(1) + "%");
console.log("Status:  " + (zdany ? "ZDANY" : "NIEZDANY"));

Skompiluj projekt i uruchom wynik:

npx tsc
node dist/index.js

Punkty:  31 / 40
Wynik:   77.5%
Status:  ZDANY

Co się właśnie stało

• npx tsc przeczytał tsconfig.json, sprawdził typy w folderze src i zapisał gotowy JavaScript w folderze dist.
• node dist/index.js uruchomił wynik kompilacji, a nie twój plik źródłowy. Node.js nie umie uruchomić pliku .ts.
• Zajrzyj do dist/index.js — zobaczysz ten sam kod, ale bez dwukropków i typów. To dowód z lekcji 1: typy znikają.

Sprawdź, że kontrola typów naprawdę działa

Dopisz na końcu pliku jedną linijkę i skompiluj ponownie:

const komentarz: string = procent;

src/index.ts:13:7 - error TS2322: Type 'number' is not assignable to type 'string'.

Kompilator podaje plik, numer linii i kolumny oraz kod błędu. Tłumaczenie: „próbujesz włożyć liczbę do pudełka opisanego jako tekst”. Usuń tę linię, zanim przejdziesz dalej.

Tryb czuwania — koniec z ręczną kompilacją

Wpisywanie npx tsc po każdej zmianie szybko męczy. Kompilator potrafi obserwować pliki i przeliczać je sam:

npx tsc --watch

Terminal zostaje zajęty i po każdym zapisie pliku pokazuje wynik sprawdzania. Otwórz drugi terminal (ikona + w panelu terminala) i tam uruchamiaj node dist/index.js. Tryb czuwania przerywasz skrótem Ctrl + C.

Własne skróty w package.json

Żeby nie pamiętać tych poleceń, dopisz do package.json sekcję scripts:

"scripts": {
  "build": "tsc",
  "watch": "tsc --watch",
  "start": "tsc && node dist/index.js"
}

Od teraz jedno polecenie npm start kompiluje projekt i od razu go uruchamia — będziemy go używać do końca kursu.

Kiedy coś nie działa

Zadania

const imie: string = "Kacper";
const klasa: string = "3TI";
const rokNauki: number = 3;
const zdanyProbny: boolean = true;

console.log("╔══════════════════════════════╗");
console.log("║  " + imie + " — klasa " + klasa);
console.log("║  Rok nauki: " + rokNauki);
console.log("║  Próbny INF.04: " + (zdanyProbny ? "zdany" : "do poprawy"));
console.log("╚══════════════════════════════╝");

Ściąga z tej lekcji