tsconfig.json erstellen

tsconfig.json erstellen für Node.js, Vite, Bibliotheken oder CommonJS: mit passender moduleResolution, strict mode und einer Erklärung zu jeder Option.

tsconfig.json
    Erklärung der Optionen
    OptionWertBedeutung

    Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

    Die passende TypeScript-Konfiguration

    Die Datei tsconfig.json steuert den TypeScript-Compiler: welche Dateien geprüft werden, wie streng die Prüfung ist und in welche JavaScript-Version übersetzt wird. Mit diesem Generator können Sie eine tsconfig.json erstellen, die zu Ihrer Laufzeitumgebung passt. Der tsconfig Generator kennt vier typische Fälle: Node.js mit ES-Modulen, eine Web-App, die ein Bundler wie Vite baut, eine Bibliothek, die Typdeklarationen mitliefert, und Node.js mit CommonJS für ältere Projekte. Jede gesetzte Option wird in der Tabelle unter der Datei erklärt.

    Die wichtigste Entscheidung dieser TypeScript-Konfiguration ist das Paar module und moduleResolution. Für Node.js gilt NodeNext: TypeScript prüft dann wie Node.js, ob eine Datei ES-Modul oder CommonJS ist, und verlangt in relativen Importen die Dateiendung, also import { x } from "./util.js", auch wenn die Quelldatei util.ts heißt. Für Bundler gilt moduleResolution: "Bundler": Endungen sind optional, und TypeScript prüft nur, während der Bundler das JavaScript erzeugt (noEmit).

    Der strict mode schaltet eine Gruppe von Prüfungen ein, darunter strictNullChecks und noImplicitAny, und ist für neue Projekte der empfohlene Standard. noUncheckedIndexedAccess geht weiter und behandelt jeden Zugriff wie liste[i] als möglicherweise undefined; das fängt echte Fehler ab, erfordert aber mehr Prüfungen im Code. Ein Pfad-Alias wie @/* wird nur vom Typprüfer verstanden; Node.js selbst löst ihn nicht auf, Bundler meist über eigene Einstellungen. Die passende package.json erstellen Sie nebenan.

    Anleitung: tsconfig.json erstellen in 4 Schritten

    1. Unter „Projekttyp“ wählen, ob der Code mit Node.js, einem Bundler wie Vite, als Bibliothek oder als CommonJS läuft.
    2. „Zielversion“ und die Prüfungen wie „strict“ und noUncheckedIndexedAccess festlegen.
    3. Quell- und Ausgabeverzeichnis, JSX, Deklarationen, Source Maps und einen Pfad-Alias eintragen.
    4. Die Tabelle mit den Erklärungen prüfen und die Datei als tsconfig.json ins Projekt kopieren.

    Typische Anwendungsfälle

    • Neues TypeScript-Projekt aufsetzen, ohne sich durch alle Compiler-Optionen zu arbeiten.
    • Fehler wie „Relative import paths need explicit file extensions“ verstehen, die von module und moduleResolution abhängen.
    • Eine bestehende, gewachsene Konfiguration mit einer aktuellen Vorlage vergleichen und aufräumen.
    Fragen

    Häufige Fragen

    Welches target soll ich wählen?

    Das target bestimmt, welche JavaScript-Syntax TypeScript ausgibt. Für aktuelle Node.js-Versionen und Browser ist ES2022 eine sichere Wahl. Höher bringt kaum Vorteile, niedriger nur, wenn sehr alte Umgebungen unterstützt werden müssen.

    Warum meldet TypeScript, dass ich .js in Importe schreiben soll?

    Mit module: NodeNext folgt TypeScript den Regeln von Node.js für ES-Module, und Node.js verlangt die vollständige Dateiendung. Sie schreiben die Endung der späteren Ausgabedatei, also .js.

    Was macht skipLibCheck?

    Es überspringt die Typprüfung der Deklarationsdateien (.d.ts) in node_modules. Das beschleunigt den Build und vermeidet Fehler aus fremden Paketen; Ihr eigener Code wird weiter vollständig geprüft.

    Brauche ich isolatedModules?

    Ja, wenn ein anderes Werkzeug als tsc Ihren Code Datei für Datei übersetzt, etwa esbuild, Vite oder SWC. Die Option warnt vor Konstrukten, die ohne Blick auf andere Dateien nicht korrekt übersetzt werden können.

    Was bewirkt verbatimModuleSyntax?

    Importe, die nur Typen betreffen, müssen dann mit import type geschrieben werden. TypeScript entfernt genau diese und lässt alle anderen Importe unverändert, was das Verhalten vorhersehbar macht.

    Kann ich eine gemeinsame Basis-Konfiguration verwenden?

    Ja, mit "extends": "./tsconfig.base.json" oder einem Paket wie @tsconfig/node22. Eigene Optionen in der Datei überschreiben die geerbten.

    Wie prüfe ich, welche Einstellungen am Ende gelten?

    npx tsc --showConfig gibt die vollständig aufgelöste Konfiguration aus, einschließlich geerbter Werte und der Liste der eingeschlossenen Dateien.

    Weitere Werkzeuge

    Das könnte auch helfen

    Alle 558 Werkzeuge