TypeScript - tsconfig.json: Ein Anfängerleitfaden

Hallo da draußen, zukünftiger Codingsuperstar! ? Heute begeben wir uns auf eine aufregende Reise in die Welt von TypeScript und seinem treuen Sidekick, der tsconfig.json-Datei. Mach dir keine Sorgen, wenn du noch nie eine Zeile Code geschrieben hast – ich werde dein freundlicher Guide sein, und wir werden das gemeinsam, Schritt für Schritt, angehen.

Was ist tsconfig.json?

Bevor wir tiefer einsteigen, lassen wir uns darüber unterhalten, was tsconfig.json eigentlich ist. Stell dir vor, du baust ein Haus (dein TypeScript-Projekt). Die tsconfig.json-Datei ist wie die Bauplan für dein Haus. Sie tells TypeScript, wie du dein Projekt gebaut haben möchtest, welche Funktionen du verwenden möchtest und wie streng die Regeln sein sollen.

Grundstruktur der tsconfig.json-Datei

Nun schauen wir uns die grundlegende Struktur einer tsconfig.json-Datei an. Sie ist in JSON-Format geschrieben, was eine Möglichkeit ist, Daten zu organisieren, die sowohl Menschen als auch Computer leicht verstehen können.

Hier ist ein einfaches Beispiel:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}

Lassen wir das auseinander:

1. Die gesamte Datei ist in geschweifte Klammern {} eingeschlossen.
2. Innen haben wir verschiedene Abschnitte wie compilerOptions, include und exclude.
3. Jeder Abschnitt enthält spezifische Einstellungen.

CompilerOptions

Der Abschnitt compilerOptions ist, wo die Magie passiert. Es ist so, als würde man dem Koch (TypeScript-Compiler) sagen, wie man sein Gericht (Code) zubereiten möchte. Sehen wir uns einige häufige Optionen an:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"outDir": "./dist",
"rootDir": "./src",
"sourceMap": true
}
}

Lassen wir jeden dieser erläutern:

• target: Dies tells TypeScript, welche Version von JavaScript kompiliert werden soll. "es5" wird von den meisten Browsern unterstützt.
• module: Dies gibt an, welches Modulsystem verwendet werden soll. "commonjs" wird commonly für Node.js-Projekte verwendet.
• strict: Wenn auf true gesetzt, aktiviert es eine Reihe von strengen Typprüfoptionen.
• outDir: Dies ist der Ort, an den TypeScript die kompilierten JavaScript-Dateien legt.
• rootDir: Dies ist der Ort, an dem TypeScript nach deinen Quelldateien suchen soll.
• sourceMap: Wenn true, generiert es Source-Map-Dateien, die für das Debuggen nützlich sind.

Include und Exclude

Die Abschnitte include und exclude sagen TypeScript, welche Dateien kompiliert und welche ignoriert werden sollen:

{
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

• include: Dies tells TypeScript, alle Dateien im src-Verzeichnis und seinen Unterordnern zu kompilieren.
• exclude: Dies tells TypeScript, das node_modules-Verzeichnis und alle Dateien, die mit .spec.ts enden (normalerweise für Testdateien verwendet), zu ignorieren.

Gemeinsame Szenarien und Konfigurationen

Nun, da wir die Grundlagen verstehen, schauen wir uns einige gemeinsame Szenarien an, die du begegnen könntest, und wie man tsconfig.json dafür konfiguriert.

Szenario 1: React-Projekt

Wenn du an einem React-Projekt arbeitest, könntest du eine Konfiguration wie diese verwenden:

{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}

Diese Konfiguration ist für die React-Entwicklung optimiert. Sie ermöglicht die Verwendung von JSX, aktiviert strenge Typprüfungen und richtet die Modulauflösung für eine typische React-Projektstruktur ein.

Szenario 2: Node.js Backend-Projekt

Für ein Node.js Backend-Projekt könntest du eine Konfiguration wie diese verwenden:

{
"compilerOptions": {
"target": "es2018",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

Diese Konfiguration ist für ein Node.js Backend-Projekt geeignet. Sie kompiliert zu einer neueren Version von JavaScript (ES2018), verwendet CommonJS-Module und richtet Eingabe- und Ausgabeverzeichnisse ein.

Nützliche tsconfig.json-Optionen

Hier ist eine Tabelle mit einigen nützlichen tsconfig.json-Optionen, die du verwenden möchtest:

Option	Beschreibung
noImplicitAny	Fehler erzeugen bei Ausdrücken und Deklarationen mit einer impliziten 'any'-Typ
strictNullChecks	Strenge Null-Prüfungen aktivieren
strictFunctionTypes	Strenge Überprüfung von Funktionstypen aktivieren
strictBindCallApply	Strenge 'bind', 'call' und 'apply'-Methoden für Funktionen aktivieren
noUnusedLocals	Fehler melden bei ungenutzten lokalen Variablen
noUnusedParameters	Fehler melden bei ungenutzten Parametern
noImplicitReturns	Fehler melden, wenn nicht alle Code-Pfade in einer Funktion einen Wert zurückgeben
noFallthroughCasesInSwitch	Fehler melden für Durchfall-Szenarien in Switch-Anweisungen

Denke daran, du kannst dich immer auf die offizielle TypeScript-Dokumentation beziehen, um eine vollständige Liste der Optionen und ihre Beschreibungen zu erhalten.

Schlussfolgerung

Und das war's, mein Codierungslehrling! Wir haben die Welt von tsconfig.json bereist, von ihrer grundlegenden Struktur bis hin zu gemeinsamen Szenarien und nützlichen Optionen. Erinnere dich daran, dass tsconfig.json wie ein Schweizer Army Knife für deine TypeScript-Projekte ist – es ist unglaublich vielseitig und kann an deine spezifischen Bedürfnisse angepasst werden.

Wenn du deine TypeScript-Reise fortsetzt, habe keine Angst, verschiedene Konfigurationen auszuprobieren. Jedes Projekt könnte eine leicht unterschiedliche Einstellung erfordern, und das ist in Ordnung! Je mehr du mit tsconfig.json experimentierst, desto bequemer wirst du mit seinen Fähigkeiten.

Weiter codieren, weiter lernen und vor allem: Viel Spaß! Bis zum nächsten Mal, mögen deine Typen stark und deine Fehler少数 sein. Frohes TypeScripten! ??‍??‍?

Credits: Image by storyset