M

MLOG

Deutsch

Meistern Sie die TypeScript-Konfiguration mit diesem tiefgehenden Leitfaden für tsconfig.json. Lernen Sie wichtige Compiler-Optionen, Projekteinrichtung und fortgeschrittene Konfigurationen für eine effiziente Entwicklung.

TypeScript-Konfiguration: Ein umfassender Leitfaden für tsconfig.json

TypeScript, ein Superset von JavaScript, bringt statische Typisierung in die dynamische Welt der Webentwicklung. Eine gut konfigurierte tsconfig.json-Datei ist entscheidend, um die volle Leistung von TypeScript zu nutzen. Dieser Leitfaden bietet einen umfassenden Überblick über tsconfig.json und behandelt wesentliche Compiler-Optionen, die Projekteinrichtung und fortgeschrittene Konfigurationen.

Was ist tsconfig.json?

Die tsconfig.json-Datei ist eine Konfigurationsdatei, die die Compiler-Optionen für ein TypeScript-Projekt festlegt. Sie teilt dem TypeScript-Compiler mit, wie TypeScript-Code in JavaScript transpiliert werden soll. Diese Datei ist unerlässlich, um die Projektstruktur zu definieren, Kompilierungsregeln festzulegen und die Konsistenz im gesamten Entwicklungsteam zu gewährleisten, unabhängig davon, ob sich das Team in einem einzigen Büro befindet oder über mehrere Kontinente verteilt ist.

Erstellen einer tsconfig.json-Datei

Um eine tsconfig.json-Datei zu erstellen, navigieren Sie im Terminal zum Stammverzeichnis Ihres Projekts und führen Sie den folgenden Befehl aus:

tsc --init

Dieser Befehl generiert eine grundlegende tsconfig.json-Datei mit häufig verwendeten Compiler-Optionen. Sie können die Datei dann an die spezifischen Anforderungen Ihres Projekts anpassen. Eine typische tsconfig.json enthält Optionen wie compilerOptions, include und exclude.

Wesentliche Compiler-Optionen

Der Abschnitt compilerOptions ist das Herzstück der tsconfig.json-Datei. Er enthält eine Vielzahl von Optionen, die das Verhalten des TypeScript-Compilers steuern. Hier sind einige der wichtigsten Compiler-Optionen:

target

Die Option target gibt die ECMAScript-Zielversion für den generierten JavaScript-Code an. Gängige Werte sind ES5, ES6 (ES2015), ES2016, ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext. Die Wahl des richtigen Ziels ist entscheidend, um die Kompatibilität mit der vorgesehenen Laufzeitumgebung, wie z. B. Browsern oder Node.js-Versionen, sicherzustellen.

Beispiel:

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

module

Die Option module gibt den Stil der Modul-Code-Generierung an. Gängige Werte sind CommonJS, AMD, System, UMD, ES6 (ES2015), ES2020 und ESNext. Die Wahl des Modulsystems hängt von der Zielumgebung und dem verwendeten Modul-Bundler (z. B. Webpack, Rollup, Parcel) ab. Für Node.js wird oft CommonJS verwendet, während für moderne Webanwendungen ES6 oder ESNext mit einem Modul-Bundler bevorzugt wird. Die Verwendung von ESNext ermöglicht es Entwicklern, die neuesten Funktionen und Optimierungen zu nutzen, während sie sich auf den Bundler verlassen, um das endgültige Modulformat zu handhaben.

Beispiel:

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

lib

Die Option lib gibt eine Liste von Bibliotheksdateien an, die in die Kompilierung einbezogen werden sollen. Diese Bibliotheksdateien bieten Typdefinitionen für eingebaute JavaScript-APIs und Browser-APIs. Gängige Werte sind ES5, ES6, ES2015, ES2016, ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext, DOM, WebWorker, ScriptHost, ES2015.Core, ES2015.Collection, ES2015.Iterable, ES2015.Promise, ES2015.Proxy, ES2015.Reflect, ES2015.Generator, ES2015.Symbol, ES2015.Symbol.WellKnown, ES2016.Array.Include, ES2017.object, ES2017.Intl, ES2017.SharedMemory, ES2017.String, ES2017.TypedArrays, ES2018.Intl, ES2018.Promise, ES2018.RegExp, ES2019.Array, ES2019.Object, ES2019.String, ES2019.Symbol, ES2020.BigInt, ES2020.Promise, ES2020.String, ES2020.Symbol.WellKnown, ES2021.Promise, ES2021.String, ES2021.WeakRef, ES2022.Error, ES2022.Object, ES2022.String und viele mehr. Die Auswahl der geeigneten Bibliotheken stellt sicher, dass der TypeScript-Compiler über die notwendigen Typinformationen für die Zielumgebung verfügt. Die Verwendung der DOM-Bibliothek ermöglicht es dem Projekt, Code zu kompilieren, der browserspezifische APIs ohne Typfehler verwendet.

Beispiel:

{
  "compilerOptions": {
    "lib": ["ES2020", "DOM"]
  }
}

allowJs

Die Option allowJs erlaubt dem TypeScript-Compiler, JavaScript-Dateien zusammen mit TypeScript-Dateien zu kompilieren. Dies ist nützlich für die schrittweise Migration bestehender JavaScript-Projekte zu TypeScript. Dies auf true zu setzen, ermöglicht es dem Compiler, .js-Dateien zu verarbeiten, was eine schrittweise Einführung von TypeScript in einem Projekt ermöglicht.

Beispiel:

{
  "compilerOptions": {
    "allowJs": true
  }
}

jsx

Die Option jsx gibt an, wie die JSX-Syntax behandelt werden soll. Gängige Werte sind preserve, react, react-native und react-jsx. preserve behält die JSX-Syntax in der Ausgabe bei, während react JSX in React.createElement-Aufrufe umwandelt. react-jsx verwendet die neue JSX-Transformation, die in React 17 eingeführt wurde und kein Importieren von React erfordert. Die Wahl der richtigen JSX-Option ist für Projekte, die React oder andere JSX-basierte Bibliotheken verwenden, entscheidend.

Beispiel:

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

declaration

Die Option declaration generiert entsprechende .d.ts-Deklarationsdateien für jede TypeScript-Datei. Deklarationsdateien enthalten Typinformationen und werden von anderen TypeScript-Projekten verwendet, um den kompilierten Code zu nutzen. Das Generieren von Deklarationsdateien ist unerlässlich für die Erstellung wiederverwendbarer Bibliotheken und Module. Diese Dateien ermöglichen es anderen TypeScript-Projekten, die von der Bibliothek bereitgestellten Typen und Schnittstellen zu verstehen, ohne den ursprünglichen Quellcode kompilieren zu müssen.

Beispiel:

{
  "compilerOptions": {
    "declaration": true
  }
}

sourceMap

Die Option sourceMap generiert Source-Map-Dateien, die den generierten JavaScript-Code auf den ursprünglichen TypeScript-Code zurückführen. Source Maps sind für das Debuggen von TypeScript-Code in Browsern und anderen Umgebungen unerlässlich. Wenn ein Fehler im JavaScript-Code auftritt, ermöglicht die Source Map dem Entwickler, den entsprechenden TypeScript-Code im Debugger zu sehen, was die Identifizierung und Behebung des Problems erleichtert.

Beispiel:

{
  "compilerOptions": {
    "sourceMap": true
  }
}

outDir

Die Option outDir gibt das Ausgabeverzeichnis für die generierten JavaScript-Dateien an. Diese Option hilft, die Build-Ausgabe des Projekts zu organisieren, indem der Quellcode vom kompilierten Code getrennt wird. Die Verwendung von outDir erleichtert die Verwaltung des Build-Prozesses und die Bereitstellung der Anwendung.

Beispiel:

{
  "compilerOptions": {
    "outDir": "dist"
  }
}

rootDir

Die Option rootDir gibt das Stammverzeichnis des TypeScript-Projekts an. Der Compiler verwendet dieses Verzeichnis als Basis für die Auflösung von Modulnamen. Diese Option ist besonders wichtig für Projekte mit einer komplexen Verzeichnisstruktur. Die korrekte Einstellung des rootDir stellt sicher, dass der Compiler alle notwendigen Module und Abhängigkeiten finden kann.

Beispiel:

{
  "compilerOptions": {
    "rootDir": "src"
  }
}

strict

Die Option strict aktiviert alle strikten Typüberprüfungsoptionen. Dies wird dringend empfohlen für neue TypeScript-Projekte, da es hilft, potenzielle Fehler frühzeitig im Entwicklungsprozess zu erkennen. Die Aktivierung des strikten Modus erzwingt strengere Typüberprüfungsregeln, was zu robusterem und wartbarerem Code führt. Es ist eine bewährte Vorgehensweise, den strikten Modus in allen neuen TypeScript-Projekten zu aktivieren.

Beispiel:

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

esModuleInterop

Die Option esModuleInterop ermöglicht die Interoperabilität zwischen CommonJS- und ES-Modulen. Dies ist wichtig für Projekte, die beide Arten von Modulen verwenden. Wenn esModuleInterop aktiviert ist, behandelt TypeScript die Unterschiede zwischen CommonJS- und ES-Modulen automatisch, was den Import und Export von Modulen zwischen den beiden Systemen erleichtert. Diese Option ist besonders nützlich bei der Arbeit mit Drittanbieter-Bibliotheken, die möglicherweise unterschiedliche Modulsysteme verwenden.

Beispiel:

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

moduleResolution

Die Option moduleResolution gibt an, wie TypeScript Modulimporte auflöst. Gängige Werte sind Node und Classic. Die Node-Modulauflösungsstrategie ist der Standard und basiert auf dem Modulauflösungsalgorithmus von Node.js. Die Classic-Modulauflösungsstrategie ist älter und wird seltener verwendet. Die Verwendung der Node-Modulauflösungsstrategie stellt sicher, dass TypeScript Modulimporte in einer Node.js-Umgebung korrekt auflösen kann.

Beispiel:

{
  "compilerOptions": {
    "moduleResolution": "Node"
  }
}

baseUrl und paths

Die Optionen baseUrl und paths werden verwendet, um die Modulauflösung für nicht-relative Modulimporte zu konfigurieren. Die Option baseUrl gibt das Basisverzeichnis für die Auflösung von nicht-relativen Modulnamen an. Die Option paths ermöglicht es Ihnen, Modulnamen auf bestimmte Speicherorte im Dateisystem abzubilden. Diese Optionen sind besonders nützlich für Projekte mit einer komplexen Verzeichnisstruktur und zur Vereinfachung von Modulimporten. Die Verwendung von baseUrl und paths kann den Code lesbarer und wartbarer machen.

Beispiel:

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

Include- und Exclude-Optionen

Die Optionen include und exclude geben an, welche Dateien in die Kompilierung einbezogen und welche ausgeschlossen werden sollen. Diese Optionen verwenden Glob-Muster, um Dateinamen abzugleichen. Die Verwendung von include und exclude ermöglicht es Ihnen, zu steuern, welche Dateien vom TypeScript-Compiler verarbeitet werden, was die Build-Leistung verbessert und Fehler reduziert. Es ist eine bewährte Vorgehensweise, die in die Kompilierung einzubeziehenden Dateien explizit anzugeben.

Beispiel:

{
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Extends-Option

Die Option extends ermöglicht es Ihnen, Compiler-Optionen von einer anderen tsconfig.json-Datei zu erben. Dies ist nützlich, um gemeinsame Konfigurationseinstellungen zwischen mehreren Projekten zu teilen oder um Basiskonfigurationen zu erstellen. Die Verwendung der extends-Option fördert die Wiederverwendung von Code und reduziert Duplikate. Es ist eine bewährte Vorgehensweise, Basiskonfigurationen zu erstellen und diese in einzelnen Projekten zu erweitern.

Beispiel:

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "jsx": "react-jsx"
  },
  "include": ["src/**/*"]
}

Fortgeschrittene Konfigurationen

Über die wesentlichen Compiler-Optionen hinaus unterstützt tsconfig.json fortgeschrittene Konfigurationen für spezielle Szenarien.

Inkrementelle Kompilierung

Für große Projekte kann die inkrementelle Kompilierung die Build-Zeiten erheblich verbessern. TypeScript kann die Ergebnisse früherer Kompilierungen zwischenspeichern und nur die geänderten Dateien neu kompilieren. Die Aktivierung der inkrementellen Kompilierung kann die Build-Zeiten für große Projekte drastisch reduzieren. Dies ist besonders wichtig für Projekte mit einer großen Anzahl von Dateien und Abhängigkeiten.

{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": ".tsbuildinfo"
  }
}

Projekt-Referenzen

Projekt-Referenzen ermöglichen es Ihnen, große TypeScript-Projekte in kleinere, unabhängige Module zu strukturieren. Dies kann die Build-Zeiten und die Code-Organisation verbessern. Die Verwendung von Projekt-Referenzen kann große Projekte überschaubarer und einfacher zu warten machen. Es ist eine bewährte Vorgehensweise, Projekt-Referenzen für große, komplexe Projekte zu verwenden.

{
  "compilerOptions": {
    "composite": true
  },
  "references": [
    { "path": "./module1" },
    { "path": "./module2" }
  ]
}

Benutzerdefinierte Typdefinitionen

Manchmal müssen Sie möglicherweise Typdefinitionen für JavaScript-Bibliotheken bereitstellen, die keine haben. Sie können benutzerdefinierte .d.ts-Dateien erstellen, um die Typen für diese Bibliotheken zu definieren. Die Erstellung benutzerdefinierter Typdefinitionen ermöglicht es Ihnen, JavaScript-Bibliotheken in Ihrem TypeScript-Code zu verwenden, ohne die Typsicherheit zu opfern. Dies ist besonders nützlich bei der Arbeit mit altem JavaScript-Code oder Bibliotheken, die keine eigenen Typdefinitionen bereitstellen.

// custom.d.ts
declare module 'my-library' {
  export function doSomething(x: number): string;
}

Bewährte Vorgehensweisen

Fehlerbehebung bei häufigen Problemen

Die Konfiguration von tsconfig.json kann manchmal eine Herausforderung sein. Hier sind einige häufige Probleme und deren Lösungen:

Probleme bei der Modulauflösung

Wenn Sie Fehler bei der Modulauflösung feststellen, stellen Sie sicher, dass die Option moduleResolution korrekt konfiguriert ist und die Optionen baseUrl und paths richtig eingerichtet sind. Überprüfen Sie die in der Option paths angegebenen Pfade, um sicherzustellen, dass sie korrekt sind. Vergewissern Sie sich, dass alle notwendigen Module im Verzeichnis node_modules installiert sind.

Typfehler

Typfehler können auftreten, wenn die Typdefinitionen falsch sind oder fehlen. Stellen Sie sicher, dass Sie die korrekten Typdefinitionen für alle verwendeten Bibliotheken installiert haben. Wenn Sie eine JavaScript-Bibliothek ohne Typdefinitionen verwenden, sollten Sie die Erstellung benutzerdefinierter Typdefinitionen in Betracht ziehen.

Kompilierungsfehler

Kompilierungsfehler können auftreten, wenn es Syntax- oder Typfehler in Ihrem TypeScript-Code gibt. Überprüfen Sie die Fehlermeldungen sorgfältig und beheben Sie alle Syntax- oder Typfehler. Stellen Sie sicher, dass Ihr Code den TypeScript-Codierungskonventionen folgt.

Fazit

Eine gut konfigurierte tsconfig.json-Datei ist für ein erfolgreiches TypeScript-Projekt unerlässlich. Indem Sie die wesentlichen Compiler-Optionen und fortgeschrittenen Konfigurationen verstehen, können Sie Ihren Entwicklungsworkflow optimieren, die Codequalität verbessern und die Kompatibilität mit der Zielumgebung sicherstellen. Die Investition von Zeit in die richtige Konfiguration von tsconfig.json wird sich auf lange Sicht auszahlen, indem Fehler reduziert, die Wartbarkeit verbessert und der Build-Prozess optimiert wird. Das Ergebnis ist eine effizientere und zuverlässigere Softwareentwicklung. Die hier bereitgestellten Informationen sind universell anwendbar und sollten eine solide Grundlage für den Start eines neuen Projekts mit TypeScript bieten.

Denken Sie daran, die offizielle TypeScript-Dokumentation für die aktuellsten Informationen und detaillierte Erklärungen aller verfügbaren Compiler-Optionen zu konsultieren. Die TypeScript-Dokumentation ist eine wertvolle Ressource, um die Feinheiten der TypeScript-Konfiguration zu verstehen.