Instalacja, kompilacja i pierwszy program

Czego się dziś nauczysz

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

Node.js uruchamia JavaScript w konsoli. W naszym środowisku uruchamia także kompilator tsc, który sprawdza kod TypeScriptu.

Zainstaluj Node.js 24 LTS, co najmniej 24.15.0, ze strony Node.js. Wersja użyta do sprawdzenia kursu to 24.20.0. Następnie otwórz nowy terminal i sprawdź wersje:

node -v
npm -v

v24.20.0
11.x.x (numer Twojego npm może się różnić)

Numer npm może się różnić. Node powinien spełniać podany zakres, a TypeScript w tym kursie ma należeć do linii 6.0. Angular 22.0.x wymaga TypeScriptu >=6.0.0 i <6.1.0; dla kolejnych wydań sprawdzaj oficjalną tabelę zgodności.

Zakładamy projekt

Utwórz folder kurs-ts, otwórz go w VS Code i uruchom poniższe polecenia w terminalu. W PowerShell możesz pisać npm.cmd i npx.cmd, jeśli polityka systemu blokuje skrypty npm.ps1.

npm init -y
npm pkg set type=module
npm install --save-dev typescript@~6.0.0 @types/node@24
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

Generator tworzy konfigurację z domyślnymi opcjami. Zastąp całą zawartość poniższą konfiguracją do naszego kursu konsolowego:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "moduleDetection": "force",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "noEmitOnError": true,
    "types": [
      "node"
    ],
    "lib": [
      "ES2022"
    ],
    "sourceMap": true
  },
  "include": [
    "src/**/*.ts"
  ]
}

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.
• Uruchamiamy dist/index.js, czyli wynik kompilacji. Wbudowane uruchamianie części plików .ts w nowych Node nie zastępuje sprawdzania typów przez tsc.
• 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

Na chwilę zastąp zawartość src/index.ts poniższym samodzielnym przykładem i skompiluj. Po obejrzeniu błędu przywróć poprawny program:

const procent = 77.5;
const komentarz: string = procent;
// Celowy TS2322: number nie pasuje do string.

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