TypeScript und tsconfig.json

Dieser Artikel erklärt TypeScript und tsconfig.json.

Ausgehend von der grundlegenden Rolle von TypeScript erklären wir anhand konkreter Beispiele, wie tsconfig.json in einem Projekt funktioniert.

YouTube Video

TypeScript und tsconfig.json

TypeScript ist 'JavaScript mit Typen'. Um TypeScript in realen Projekten effektiv zu nutzen, ist es jedoch unerlässlich, tsconfig.json richtig zu verstehen und gezielt zu konfigurieren.

Warum brauchen wir TypeScript?

Der Hauptgrund für die Verwendung von TypeScript ist zunächst 'Fehler bereits vor der Ausführung zu erkennen.'.

1function add(a: number, b: number): number {
2  return a + b;
3}
4
5add(1, "2");

Dieser Code würde in JavaScript erst zur Laufzeit einen Fehler verursachen, aber in TypeScript führt er zu einem Typfehler zur Kompilierzeit.

Diese 'frühe Erkennung' verbessert die Entwicklungseffizienz und -qualität erheblich.

Wie wird TypeScript ausgeführt?

Grundsätzlich kann TypeScript nicht direkt ausgeführt werden. Sie müssen es mit dem tsc (TypeScript Compiler) in JavaScript umwandeln..

1npm install -D typescript
2npx tsc --init

• Durch diesen Vorgang wird tsconfig.json erzeugt, die zentrale Datei, die das Verhalten des TypeScript-Projekts definiert.

Welche Rolle spielt tsconfig.json?

tsconfig.json ist eine Konfigurationsdatei, die festlegt, 'welche Dateien,' 'mit welchen Regeln' und 'wie diese konvertiert werden.'. Obwohl es zunächst komplex erscheinen mag, sind nur wenige Einstellungen wirklich wichtig.

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "strict": true
6  }
7}

• Mit nur diesen Einstellungen ist eine moderne und sichere TypeScript-Entwicklung möglich.

target: Die JavaScript-Version, die ausgegeben wird

target bestimmt das Spezifikationslevel des ausgegebenen JavaScripts.

1"target": "ES2020"

Damit wird TypeScript JavaScript ausgeben, das ES2020 entspricht. Für ältere Umgebungen wählen Sie ES5; nur für die neuesten Umgebungen beispielsweise ES2022 usw.

Bei Angabe von ESNext

1"target": "ESNext"

• ESNext legt fest, die neueste verfügbare JavaScript-Syntax unverändert auszugeben. TypeScript transpiliert die Syntax nicht, sondern überlässt die Verarbeitung der Laufzeitumgebung wie Node.js oder dem Browser.

• Daher eignet sich ESNext nur, wenn ausschließlich die neueste Node.js-Version angesprochen wird oder wenn Sie Babel oder einen Bundler separat zur Transpilation verwenden. Andererseits kann es zu Laufzeitfehlern kommen, wenn die Laufzeitumgebung die neueste Syntax nicht unterstützt – daher ist Vorsicht geboten.

module: Das Modulformat festlegen

module legt das Modulformat fest.

1"module": "ESNext"

• ESNext ist Standard im Frontend und modernen Node.js-Umgebungen.
• "CommonJS" sollte nur gewählt werden, wenn Sie CommonJS tatsächlich benötigen.

strict: Maximale Typsicherheit

strict ist ein Schalter, der die Sicherheit von TypeScript maximiert.

1"strict": true

• Wenn dies aktiviert ist, werden mehrdeutige Typen und potenzielle Fehler zuverlässig erkannt.

strict-Modus und implizites any

Wenn Sie strict aktivieren, betrachtet TypeScript Variablen, deren Typ nicht abgeleitet werden kann, als Fehler.

1function printValue(value) {
2	console.log(value);
3}

• Diese Variable value besitzt bei der Deklaration keine Typinformation, sodass TypeScript deren Typ nicht erkennen kann. Deshalb wird any implizit verwendet, was im strict-Modus eine Warnung (bzw. einen Fehler) auslöst.

1function printValue(value: number) {
2	console.log(value);
3}

• Wenn Sie den Typ explizit angeben, erkennt TypeScript, dass 'diese Variable nur mit Zahlen arbeitet.'. In TypeScript ist es wichtiger, dass der Typ eindeutig bestimmt werden kann, als dass der Typ weggelassen werden kann.

include/exclude: Steuert, welche Dateien kompiliert werden

In tsconfig.json können Sie festlegen, welche Dateien einbezogen und welche ausgeschlossen werden sollen.

1{
2  "include": ["src"],
3  "exclude": ["node_modules"]
4}

• Damit werden nur die Dateien im src-Verzeichnis von TypeScript verwaltet.
• node_modules, das in exclude angegeben ist, wird von der Kompilierung ausgeschlossen – selbst wenn es von einem in include angegebenen Pfad erfasst wird.

outDir: Das Ausgabeverzeichnis festlegen

Geben Sie outDir an, um den Ausgabeort Ihrer Builds zu verwalten.

1"outDir": "dist"

• Damit werden alle kompilierten Ergebnisse im Ordner dist abgelegt. In der Praxis ist es Standard, Quellcode und Build-Artefakte zu trennen.

rootDir: Das Quellverzeichnis festlegen

rootDir legt das Verzeichnis fest, das TypeScript als Wurzel des Quellcodes behandelt.

1"rootDir": "src"

• Mit dieser Einstellung kann TypeScript die Verzeichnisstruktur ausgehend von src beim Ausgeben der Dateien beibehalten. Beispielsweise wird src/index.ts als dist/index.js ausgegeben.

• Die Struktur des in rootDir angegebenen Verzeichnisses wird in outDir nachgebildet.

esModuleInterop: Schnittstelle zwischen CommonJS und ES-Modules

Als nächstes betrachten wir esModuleInterop.

1"esModuleInterop": true

• Wenn dies aktiviert ist, können Sie CommonJS-Module sicher mit der import-Syntax verwenden.

1import fs from "fs";

• Diese Einstellung ist beim Einsatz von Node.js fast unerlässlich.

noImplicitAny: Implizite 'any'-Typen verbieten

Es ist auch wichtig, die Typüberprüfung in der tsconfig.json zu verstärken.

1"noImplicitAny": true

• Damit können Sie implizite any-Typen verhindern. Dadurch können Sie zuverlässig Stellen erkennen, an denen Sie vergessen haben, einen Typ anzugeben.

Konfiguration zur Erkennung von ungenutztem Code

Einstellungen zur Erkennung ungenutzten Codes helfen ebenfalls dabei, die Wartbarkeit zu verbessern.

1"noUnusedLocals": true,
2"noUnusedParameters": true

• Dadurch werden unnötige Variablen und Argumente sofort mit Warnungen markiert.

lib: Eingebaute, zur Verfügung stehende APIs festlegen

lib ist eine Einstellung, die die von TypeScript angenommenen Standard-APIs festlegt.

1"lib": ["ES2020", "DOM"]

• Mit dieser Einstellung werden die folgenden Typen verfügbar:. Mit ES2020 stehen moderne Features wie Promise, Map und Set zur Verfügung. Mit DOM stehen Browser-APIs wie document, window und HTMLElement zur Verfügung.

Im Frontend sollte DOM enthalten sein; bei reinen Node.js-Projekten sollte DOM entfernt werden, um unnötige globale Typen zu vermeiden.

moduleResolution: Regeln zur Modulsuche

moduleResolution legt fest, wie Module in Import-Anweisungen aufgelöst werden.

1"moduleResolution": "Node"

Die beiden Hauptoptionen sind folgende:.

• Wenn Sie Node angeben, werden die Auflösungsregeln von Node.js verwendet.
• Classic ist die alte, TypeScript-spezifische Methode, wird aber heute kaum noch genutzt.

In Umgebungen mit Node.js oder einem Bundler ist es sicher, explizit Node festzulegen.

Eine minimale, produktionsbereite tsconfig.json

Basierend auf dem bisher Besprochenen würde eine minimale, produktionsreife tsconfig.json wie folgt aussehen:.

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "module": "ESNext",
 5    "moduleResolution": "Node",
 6    "lib": ["ES2020", "DOM"],
 7    "strict": true,
 8    "rootDir": "src",
 9    "outDir": "dist",
10    "esModuleInterop": true,
11    "noImplicitAny": true,
12    "noUnusedLocals": true,
13    "noUnusedParameters": true
14  },
15  "include": ["src"]
16}

Diese Konfiguration bietet eine sichere Grundlage sowohl für Frontend- als auch für Node.js-Projekte.

Zusammenfassung: tsconfig.json ist ein 'Regelwerk'

tsconfig.json ist nicht nur eine Konfigurationsdatei, sondern ein 'Regelwerk', das für das gesamte Projekt gilt. Mit tsconfig.json werden wichtige Grundsätze wie die folgenden klar definiert:.

• Das Maß an Typsicherheit.
• Code-Konventionen für Ihr Team.
• Vermeidung zukünftiger Fehler.

Durch das Verständnis von tsconfig.json können Sie nicht nur TypeScript schreiben, sondern auch Ihre Projekte sicher für den Einsatz von TypeScript gestalten.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video