Frontend Academy · Lektion

TS kompilieren und tsconfig.json

Kompilieren Sie TypeScript mit tsc und konfigurieren Sie den Compiler mit Optionen in tsconfig.json wie strict, target und outDir.

TS kompilieren und tsconfig.json ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

TypeScript-Compiler installieren

Installieren Sie TypeScript als Entwicklungsabhängigkeit. Die tsc-CLI kompiliert TypeScript-Dateien. Bei Vite oder Next.js übernimmt der Bundler die Kompilierung – tsc wird jedoch weiterhin zur Typprüfung verwendet.

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

tsconfig.json initialisieren

Führen Sie npx tsc --init aus, um eine tsconfig.json mit auskommentierten Optionen und sinnvollen Standardwerten zu erzeugen. Diese Datei ist die zentrale Konfiguration für den TypeScript-Compiler.

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

Die Struktur von tsconfig.json

Die wichtigsten Abschnitte: compilerOptions (Verhalten des Compilers), include (zu kompilierende Dateien), exclude (zu überspringende Dateien).

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

target – Ausgab version von JavaScript

target legt fest, welche JavaScript-Version tsc ausgibt. Verwenden Sie ES2022 oder ESNext für moderne Umgebungen. ES5 bietet maximale Kompatibilität und wird normalerweise stattdessen von Babel übernommen.

module – Modulsystem

module steuert das Modulformat der Ausgabe. CommonJS für Node.js. ESNext oder ES2022 für Bundler wie Vite und webpack. NodeNext für modernes Node.js mit type:module in package.json.

strict – Das Strictness-Flag

"strict": true aktiviert eine Reihe strenger Prüfungen: strictNullChecks, noImplicitAny, strictFunctionTypes und weitere. Aktivieren Sie die Option in neuen Projekten immer – sie erkennt die meisten Fehler.

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

strictNullChecks – Nullfehler vermeiden

Wenn strictNullChecks aktiviert ist, können null und undefined keinen anderen Typen zugewiesen werden, sofern sie nicht ausdrücklich in einer Union enthalten sind. Dadurch müssen Sie Fälle mit null behandeln.

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

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

outDir und rootDir

outDir legt fest, wo kompilierte JS-Dateien abgelegt werden. rootDir legt das Stammverzeichnis der TypeScript-Quelldateien fest. Zusammen bilden sie die Quellstruktur unter dist/ ab.

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

paths – Modul-Aliase

Konfigurieren Sie Pfad-Aliase mit der Option paths (und baseUrl). Dadurch können Sie @/components/Button statt ../../components/Button importieren.

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

Watch-Modus und reine Typprüfung

tsc --watch kompiliert Dateien bei Änderungen erneut. tsc --noEmit führt die Typprüfung aus, ohne Dateien auszugeben – nützlich in CI, um Typen zu validieren, ohne die Aufgabe des Bundlers zu duplizieren.

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

# Watch and recompile:
npx tsc --watch

tsconfig.json erweitern

Verwenden Sie extends, um die Einstellungen einer Basiskonfiguration zu übernehmen. Gemeinsame Basiskonfigurationen wie @tsconfig/strictest stellen Best Practices der Community bereit.

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

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

Kurzüberprüfung

Welche tsconfig-Option aktiviert die vollständige Menge strenger Typprüfungen?

Zusammenfassung: tsconfig.json

tsc kompiliert TypeScript zu JavaScript. tsconfig.json steuert target (JavaScript-Ausgabeversion), module (Modulsystem), outDir, strict und paths. strict: true erkennt die meisten Fehler. Verwenden Sie --noEmit in CI für eine reine Typprüfung. Erweitern Sie gemeinschaftliche Basiskonfigurationen, um Best Practices zu übernehmen.

Häufig gestellte Fragen

Ist die Lektion „TS kompilieren und tsconfig.json“ kostenlos?

Ja — der vollständige Text von „TS kompilieren und tsconfig.json“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „TS kompilieren und tsconfig.json“?

Kompilieren Sie TypeScript mit tsc und konfigurieren Sie den Compiler mit Optionen in tsconfig.json wie strict, target und outDir. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „TS kompilieren und tsconfig.json“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Warum TypeScript: Typen erkennen Fehler zur Compile-Zeit
Primitive Typen, Unions und Type Aliases
Interfaces und Objekttypen
TS kompilieren und tsconfig.json

← Zurück zu Frontend Academy