0Pricing
TypeScript Academy · Lekcja

Kompilowanie TypeScriptu do JavaScriptu

Proszę zrozumieć działanie kompilatora TypeScript i generowane przez niego dane wyjściowe.

Kompilowanie TypeScriptu do JavaScriptu to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 3 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 TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Witamy

TypeScript nie może być uruchamiany bezpośrednio w Node.js ani w przeglądarce. Najpierw trzeba go skompilować do JavaScript. W tej lekcji dowiedzą się Państwo, jak działa kompilator TypeScript.

Instalowanie kompilatora TypeScript

Zainstaluj TypeScript jako zależność deweloperską w projekcie. Po instalacji polecenie `tsc` będzie dostępne w lokalnych skryptach.
npm install --save-dev typescript
npx tsc --version

Pierwsza kompilacja za pomocą tsc

Uruchom `tsc hello.ts`, aby skompilować pojedynczy plik. W tym samym katalogu powstanie plik `hello.js`, z którego usunięto wszystkie typy.
// hello.ts
function greet(name: string): string {
  return 'Hello, ' + name;
}
console.log(greet('World'));

// Compile: npx tsc hello.ts
// Output: hello.js (no types)

tsconfig.json: konfiguracja projektu

W rzeczywistym projekcie potrzebny jest plik `tsconfig.json`. Uruchom `tsc --init`, aby go wygenerować. Steruje on między innymi wersją docelową, formatem modułów, rygorystycznością i katalogiem wyjściowym.
npx tsc --init
// Creates tsconfig.json with defaults and comments

Najważniejsze opcje tsconfig

Najważniejsze pola tsconfig to target (wersja ES danych wyjściowych), module (system modułów), outDir (katalog wyjściowy) oraz strict (włączenie wszystkich ścisłych kontroli).
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  }
}

Tryb obserwowania za pomocą tsc --watch

Uruchom `tsc --watch`, aby automatycznie ponownie kompilować kod po każdym zapisaniu pliku TypeScript. Przyspiesza to cykl tworzenia oprogramowania.
npx tsc --watch
// Watches for changes and recompiles on save

noEmit: sprawdzanie typów bez tworzenia plików

Flaga `noEmit` uruchamia sprawdzanie typów bez zapisywania plików wyjściowych. Jest to przydatne w potokach CI, które do właściwej kompilacji używają narzędzia takiego jak Vite lub esbuild.
// tsconfig.json
{ "compilerOptions": { "noEmit": true } }

// Then run:
npx tsc --noEmit

Szybsze alternatywy: ts-node i tsx

Podczas tworzenia oprogramowania można uruchamiać TypeScript bezpośrednio, bez osobnego etapu kompilacji, za pomocą `ts-node` lub szybszego narzędzia `tsx`.
# Run TS directly with ts-node
npx ts-node src/index.ts

# Or faster with tsx
npx tsx src/index.ts

Mapy źródeł na potrzeby debugowania

Włącz `sourceMap: true`, aby narzędzia deweloperskie przeglądarki i debugery Node.js mogły mapować wiersze skompilowanego kodu JS z powrotem na oryginalny kod źródłowy TypeScript.
{ "compilerOptions": { "sourceMap": true } }

Pliki deklaracji (.d.ts)

Po włączeniu `declaration: true` kompilator generuje również pliki `.d.ts`. Dzięki nim inne projekty TypeScript mogą korzystać z biblioteki wraz z pełnymi informacjami o typach.
{ "compilerOptions": { "declaration": true } }
// Outputs: dist/index.js AND dist/index.d.ts

Błędy kompilatora domyślnie nie blokują generowania plików

Domyślnie, jeśli TypeScript zawiera błędy typów, `tsc` nadal generuje kod JavaScript, ale kończy działanie z kodem różnym od zera. Użyj `noEmitOnError: true`, aby zatrzymać generowanie plików w razie błędów.
{ "compilerOptions": { "noEmitOnError": true } }

Szybkie sprawdzenie

Co powoduje uruchomienie `tsc --noEmit`?

Podsumowanie

Kompilator TypeScript przekształca pliki .ts w JavaScript. Można go konfigurować za pomocą tsconfig.json, używać --watch podczas tworzenia oprogramowania, --noEmit wyłącznie do sprawdzania typów oraz ts-node/tsx do bezpośredniego uruchamiania TypeScript.

Często zadawane pytania

Czy lekcja „Kompilowanie TypeScriptu do JavaScriptu” jest bezpłatna?

Tak — pełny tekst „Kompilowanie TypeScriptu do JavaScriptu” 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 TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Kompilowanie TypeScriptu do JavaScriptu”?

Proszę zrozumieć działanie kompilatora TypeScript i generowane przez niego dane wyjściowe. Ćwiczysz TypeScript 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ąć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript 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 3 z 4.

Ile czasu zajmuje lekcja „Kompilowanie TypeScriptu do JavaScriptu”?

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 TypeScript Academy?

Tak. Każda lekcja TypeScript 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

  1. Problematyczne aspekty JavaScriptu: błędy czasu wykonywania
  2. Co TypeScript dodaje do JavaScriptu
  3. Kompilowanie TypeScriptu do JavaScriptu
  4. Kiedy używać TypeScriptu w projektach
← Powrót do TypeScript Academy