Kapitel 8: tsconfig.json Konfiguration

🎯 Lernziele

In diesem Kapitel lernen Sie:

• ✅ Was tsconfig.json ist und warum sie wichtig ist
• ✅ Häufige Konfigurationsoptionen
• ✅ include, exclude, files
• ✅ Automatisches Kompilieren

---

8.1 Was ist tsconfig.json?

📖 Einfache Definition

tsconfig.json ist eine Konfigurationsdatei, die dem TypeScript-Compiler mitteilt, wie Ihr Projekt kompiliert werden soll.

💡 Kernkonzept

tsconfig.json = Bauplan für den TypeScript-Compiler

Sie definiert:

• Welche Dateien kompiliert werden sollen
• Welche JavaScript-Version erzeugt werden soll
• Welche Typprüfungen aktiviert sind

🎨 Visuelle Erklärung

┌─────────────────────────────┐
│  TypeScript Projekt          │
├─────────────────────────────┤
│  src/                      │
│    ├── index.ts             │
│    ├── utils.ts            │
│    └── components/         │
│        └── Button.ts       │
│  tsconfig.json  ← Hier!    │
└─────────────────────────────┘
            ↓
┌─────────────────────────────┐
│  TypeScript Compiler (tsc)  │
│  (liest tsconfig.json)      │
└────────────────┬────────────┘
                 ↓
┌─────────────────────────────┐
│  JavaScript (dist/)         │
│  (kann im Browser ausge-   │
│   führt werden)             │
└─────────────────────────────┘

---

8.2 tsconfig.json erstellen

💻 Code-Beispiel

# tsconfig.json automatisch erstellen
tsc --init

Generierte tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es6", "dom"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

---

8.3 Wichtige Konfigurationsoptionen

1️⃣ target (Ziel-JavaScript-Version)

Bestimmt, welche JavaScript-Version erzeugt wird.

Wert	Bedeutung	Empfehlung
"es3"	Älteste Version	❌ Selten verwendet
"es5"	Weit verbreitet	⚠️ Für alte Browser
"es6" / "es2015"	Moderne Version	✅ Häufig verwendet
"es2020"	Neuere Version	✅ Empfohlen
"esnext"	Neueste Version	✅ Für moderne Projekte

{
  "compilerOptions": {
    "target": "es2020"  // Empfohlen!
  }
}

---

2️⃣ module (Modulsystem)

Bestimmt, welches Modulsystem verwendet wird.

Wert	Bedeutung	Verwendung
"commonjs"	Node.js Stil	✅ Backend, Ältere Projekte
"es6" / "es2015"	ES Modules	✅ Moderne Projekte
"esnext"	Neueste ES Modules	✅ Für Bundler (Vite, Webpack)
"amd"	AMD (RequireJS)	❌ Selten
"umd"	UMD (Universal)	⚠️ Für Bibliotheken

{
  "compilerOptions": {
    "module": "esnext"  // Empfohlen für moderne Projekte
  }
}

---

3️⃣ outDir (Ausgabeverzeichnis)

Bestimmt, wo die kompilierten JavaScript-Dateien gespeichert werden.

{
  "compilerOptions": {
    "outDir": "./dist"  // JS-Dateien landen in dist/
  }
}

Verzeichnisstruktur:

project/
├── src/
│   ├── index.ts
│   └── utils.ts
├── dist/          ← JS-Dateien erscheinen hier
│   ├── index.js
│   └── utils.js
└── tsconfig.json

---

4️⃣ rootDir (Stammverzeichnis)

Bestimmt, wo sich die TypeScript-Quelldateien befinden.

{
  "compilerOptions": {
    "rootDir": "./src",  // TS-Dateien sind in src/
    "outDir": "./dist"    // JS-Dateien → dist/
  }
}

---

5️⃣ strict (Strenge Typprüfung)

Aktiviert alle strengen Typprüfungsoptionen.

{
  "compilerOptions": {
    "strict": true  // ✅ Empfohlen!
  }
}

Beqemtigt folgende Optionen:

• noImplicitAny: Verbietet implizites any
• strictNullChecks: null und undefined sind separate Typen
• strictFunctionTypes: Strenge Funktionstypen
• strictBindCallApply: Strenge bind, call, apply
• strictPropertyInitialization: Strenge Eigenschaftsinitialisierung
• noImplicitThis: Verbietet implizites this
• alwaysStrict: Fügt "use strict" hinzu

---

6️⃣ esModuleInterop (ES Module Interoperabilität)

Ermöglicht den Import von CommonJS-Modulen mit ES-Modul-Syntax.

{
  "compilerOptions": {
    "esModuleInterop": true  // ✅ Immer aktivieren!
  }
}

Vorher (ohne esModuleInterop):

import * as fs from 'fs';  // Umständlich!

Nachher (mit esModuleInterop):

import fs from 'fs';  // Sauber!

---

8.4 include, exclude, files

📖 Einfache Definition

Diese Optionen bestimmen, welche Dateien kompiliert werden.

💻 Code-Beispiel

{
  "include": ["src/**/*"],           // Dateien zum Kompilieren
  "exclude": ["node_modules", "dist"],  // Dateien ausschließen
  "files": ["src/index.ts"]          // Nur spezifische Dateien (selten)
}

Option	Bedeutung	Beispiel
include	Dateien einschließen	["src/**/*"]
exclude	Dateien ausschließen	["node_modules", "dist"]
files	Nur diese Dateien	["src/index.ts"]

---

8.5 Nützliche Zusatzoptionen

💻 Code-Beispiel

{
  "compilerOptions": {
    "sourceMap": true,         // ✅ Erstellt .js.map Dateien (Debugging)
    "removeComments": true,    // ✅ Entfernt Kommentare im JS
    "noEmit": true,           // ✅ Kompiliert nicht (nur Typprüfung)
    "watch": true              // ✅ Automatisches Neukompilieren
  }
}

---

8.6 Automatisches Kompilieren (watch Modus)

💻 Code-Beispiel

# Automatisches Kompilieren bei Änderungen
tsc --watch

# Oder in package.json:
{
  "scripts": {
    "build": "tsc",
    "dev": "tsc --watch"
  }
}

Verwendung:

npm run dev  # Startet Watch-Modus

---

8.7 Vollständige tsconfig.json Vorlage

💻 Code-Beispiel

{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "lib": ["es2020", "dom"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "removeComments": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

---

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ tsconfig.json konfiguriert den TypeScript-Compiler
• ✅ target: Ziel-JavaScript-Version
• ✅ module: Modulsystem
• ✅ outDir, rootDir: Ein-/Ausgabeverzeichnisse
• ✅ strict: Strenge Typprüfung
• ✅ esModuleInterop: ES/CommonJS Interoperabilität
• ✅ include, exclude: Dateien filtern
• ✅ watch: Automatisches Kompilieren

---

🎯 Nächstes Kapitel

Im Kapitel 9 lernen wir häufig verwendete Tool-Typen (Utility Types)!

👉 Weiter zu Kapitel 9: Tool-Typen

---

❓ Häufig gestellte Fragen

F: Muss ich tsconfig.json manuell erstellen?

A: Nein! Verwenden Sie tsc --init.

F: Was ist der Unterschied zwischen include und files?

A:

• include: Glob-Muster (z.B. src/**/*)
• files: Exakte Dateinamen

F: Sollte ich strict: true aktivieren?

A: Ja! Es hilft, Fehler frühzeitig zu erkennen.

---

🎉 Herzlichen Glückwunsch! Sie haben Kapitel 8 abgeschlossen!