Der TypeScript Compiler

Der TypeScript Compiler (tsc) wandelt TypeScript in JavaScript um und überprüft dabei deinen Code auf Typ-Fehler. In diesem Kapitel lernst du, wie er funktioniert und wie du ihn konfigurierst.

Grundlegende Verwendung

Einzelne Datei kompilieren

tsc datei.ts

Dies erstellt datei.js im selben Verzeichnis.

Mit Konfigurationsdatei

tsc

Ohne Argumente verwendet tsc die tsconfig.json im aktuellen Verzeichnis.

Watch Mode

tsc --watch
# oder kurz
tsc -w

Kompiliert automatisch bei Dateiänderungen neu.

Die tsconfig.json

Die tsconfig.json ist das Herzstück deines TypeScript-Projekts. Sie definiert, welche Dateien kompiliert werden und wie.

Grundstruktur

{
  "compilerOptions": {
    // Compiler-Einstellungen hier
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Wichtige Compiler-Optionen

Target

Bestimmt die JavaScript-Version der Ausgabe:

{
  "compilerOptions": {
    "target": "ES2020"
  }
}

Verfügbare Werte:

• ES5 - Ältere Browser
• ES6 / ES2015 - Moderne Browser
• ES2020, ES2021, ES2022 - Neueste Features
• ESNext - Neuste JavaScript-Version

Module

Bestimmt das Modul-System:

{
  "compilerOptions": {
    "module": "ESNext"
  }
}

Optionen:

• CommonJS - Node.js Standard (require/exports)
• ESNext / ES2020 - ES Modules (import/export)
• NodeNext - Für moderne Node.js Projekte

Strict Mode

Aktiviert strenge Typ-Überprüfungen (sehr empfohlen!):

{
  "compilerOptions": {
    "strict": true
  }
}

strict: true aktiviert mehrere Optionen auf einmal:

{
  "compilerOptions": {
    "noImplicitAny": true,        // Keine impliziten 'any' Typen
    "strictNullChecks": true,     // Null/undefined werden geprüft
    "strictFunctionTypes": true,  // Strenge Funktions-Typen
    "strictBindCallApply": true,  // Strenge bind/call/apply
    "strictPropertyInitialization": true,  // Eigenschaften müssen initialisiert werden
    "noImplicitThis": true,       // Kein implizites 'this'
    "alwaysStrict": true          // "use strict" in jeder Datei
  }
}

Output-Einstellungen

{
  "compilerOptions": {
    "outDir": "./dist",           // Ausgabe-Ordner
    "rootDir": "./src",           // Quell-Ordner
    "sourceMap": true,            // Source Maps für Debugging
    "declaration": true,          // .d.ts Dateien generieren
    "declarationMap": true        // Source Maps für Deklarationen
  }
}

Module Resolution

{
  "compilerOptions": {
    "moduleResolution": "NodeNext",   // Wie Module aufgelöst werden
    "baseUrl": ".",                   // Basis für relative Imports
    "paths": {                        // Pfad-Aliase
      "@/*": ["src/*"]
    }
  }
}

Empfohlene Konfiguration

Eine solide Basis-Konfiguration:

{
  "compilerOptions": {
    // Ziel
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],

    // Strenge Typisierung
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,

    // Module
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,

    // Output
    "outDir": "./dist",
    "rootDir": "./src",
    "sourceMap": true,

    // Sonstiges
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Nützliche Zusatz-Optionen

noEmitOnError

Keine Ausgabe bei Fehlern:

{
  "compilerOptions": {
    "noEmitOnError": true
  }
}

noUnusedLocals / noUnusedParameters

Warnung bei ungenutzten Variablen:

{
  "compilerOptions": {
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
}

exactOptionalPropertyTypes

Striktere optionale Eigenschaften:

// Mit exactOptionalPropertyTypes: true
interface Config {
    debug?: boolean;
}

const config: Config = {
    debug: undefined  // Fehler! undefined ist nicht erlaubt
};

Include und Exclude

Bestimme, welche Dateien kompiliert werden:

{
  "include": [
    "src/**/*",           // Alle Dateien in src
    "types/**/*.d.ts"     // Typ-Definitionen
  ],
  "exclude": [
    "node_modules",
    "**/*.test.ts",       // Test-Dateien ausschließen
    "dist"
  ]
}

Projekt-Referenzen

Für größere Projekte mit mehreren Paketen:

{
  "references": [
    { "path": "./packages/core" },
    { "path": "./packages/utils" }
  ]
}

Kompilieren mit:

tsc --build

Fehlerausgabe verstehen

TypeScript-Fehler haben ein klares Format:

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

10     const age: number = "25";
       ~~~

• Datei und Position: src/index.ts:10:5
• Fehler-Code: TS2322
• Beschreibung: Was falsch ist
• Code-Snippet: Zeigt die problematische Stelle

Compiler-Performance

Für große Projekte:

{
  "compilerOptions": {
    "incremental": true,          // Inkrementelle Kompilierung
    "tsBuildInfoFile": ".tsbuildinfo"  // Cache-Datei
  }
}

Zusammenfassung

Du hast gelernt:

• Grundlegende Befehle - tsc, tsc --watch
• Wichtige Optionen - target, module, strict
• Projekt-Konfiguration - include/exclude
• Empfohlene Einstellungen - für sichere Typisierung

Der Compiler ist dein wichtigstes Werkzeug für typsicheren Code. Im nächsten Kapitel schreiben wir unsere ersten TypeScript-Programme und lernen die Grundlagen der Typ-Syntax!