Frontend Academy · Lekcja

Kompilowanie TS i tsconfig.json

Proszę uruchamiać tsc w celu kompilacji TypeScript oraz konfigurować kompilator za pomocą opcji tsconfig.json, takich jak strict, target i outDir.

Kompilowanie TS i tsconfig.json to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Instalowanie kompilatora TypeScript

TypeScript należy zainstalować jako zależność deweloperską. Interfejs wiersza poleceń tsc kompiluje pliki TypeScript. W przypadku Vite lub Next.js kompilacją zajmuje się bundler — tsc jest jednak nadal używany do sprawdzania typów.

npm install --save-dev typescript
npx tsc --version  # verify installation
npx tsc app.ts     # compile a single file

Inicjalizacja tsconfig.json

Uruchomienie npx tsc --init generuje plik tsconfig.json ze wszystkimi opcjami zapisanymi w komentarzach oraz rozsądnymi wartościami domyślnymi. Ten plik jest jedyną konfiguracją kompilatora TypeScript.

npx tsc --init
# Creates tsconfig.json with ~100 commented-out options

Struktura tsconfig.json

Główne sekcje to: compilerOptions (działanie kompilatora), include (pliki do skompilowania) oraz exclude (pliki pomijane).

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

target — wersja wyjściowego JavaScriptu

target określa, którą wersję JavaScriptu generuje tsc. Dla nowoczesnych środowisk należy użyć ES2022 lub ESNext. ES5 zapewnia maksymalną zgodność, ale zwykle zajmuje się tym Babel.

module — system modułów

module określa format modułów w danych wyjściowych. CommonJS służy do pracy z Node.js. ESNext lub ES2022 stosuje się w bundlerach (Vite, webpack). NodeNext służy do pracy z nowoczesnym Node.js i package.json type:module.

strict — flaga ścisłego sprawdzania

"strict": true włącza zestaw ścisłych kontroli: strictNullChecks, noImplicitAny, strictFunctionTypes i inne. Należy zawsze włączać tę opcję w nowych projektach — wykrywa ona najwięcej błędów.

{
  "compilerOptions": {
    "strict": true  // enables all strict checks
    // or individually:
    // "strictNullChecks": true,
    // "noImplicitAny": true
  }
}

strictNullChecks — eliminowanie błędów null

Po włączeniu strictNullChecks wartości null i undefined nie można przypisać do innych typów, chyba że zostaną jawnie uwzględnione w unii. Wymusza to obsługę przypadków null.

// Without strictNullChecks:
const name: string = null; // allowed

// With strictNullChecks:
const name: string = null; // Error!
const name2: string | null = null; // OK

outDir i rootDir

outDir określa, gdzie są umieszczane skompilowane pliki JS. rootDir ustawia katalog główny źródłowych plików TypeScript. Razem odwzorowują strukturę źródeł w katalogu dist/.

// src/utils.ts → dist/utils.js
{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

paths — aliasy modułów

Aliasy ścieżek konfiguruje się za pomocą opcji paths (oraz baseUrl). Dzięki temu można importować @/components/Button zamiast ../../components/Button.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

Tryb obserwowania i sprawdzanie typów bez generowania plików

tsc --watch ponownie kompiluje pliki po każdej zmianie. tsc --noEmit sprawdza typy bez generowania plików — jest to przydatne w CI, aby weryfikować typy bez powielania zadania bundlera.

# Type check only (no output):
npx tsc --noEmit

# Watch and recompile:
npx tsc --watch

Rozszerzanie tsconfig.json

Elementu extends należy użyć do dziedziczenia z konfiguracji bazowej. Współdzielone konfiguracje bazowe, takie jak @tsconfig/strictest, zapewniają najlepsze praktyki wypracowane przez społeczność.

// Install:
npm install -D @tsconfig/strictest

// tsconfig.json:
{
  "extends": "@tsconfig/strictest",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

Szybkie sprawdzenie

Jaka opcja tsconfig włącza pełny zestaw ścisłych kontroli typów?

Podsumowanie: tsconfig.json

tsc kompiluje TypeScript do JavaScriptu. tsconfig.json steruje opcjami target (wersja ES danych wyjściowych), module (system modułów), outDir, strict i paths. strict: true wykrywa najwięcej błędów. W CI należy używać --noEmit do samego sprawdzania typów. Dla najlepszych praktyk warto rozszerzać bazowe konfiguracje przygotowane przez społeczność.

Często zadawane pytania

Czy lekcja „Kompilowanie TS i tsconfig.json” jest bezpłatna?

Tak — pełny tekst „Kompilowanie TS i tsconfig.json” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Kompilowanie TS i tsconfig.json”?

Proszę uruchamiać tsc w celu kompilacji TypeScript oraz konfigurować kompilator za pomocą opcji tsconfig.json, takich jak strict, target i outDir. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Kompilowanie TS i tsconfig.json”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Dlaczego TypeScript: typy wyłapują błędy podczas kompilacji
Typy prymitywne, unie i aliasy typów
Interfejsy i typy obiektów
Kompilowanie TS i tsconfig.json

← Powrót do Frontend Academy