tsconfig.json ohne Cheat-Sheet auf dem Zweitmonitor
Jedes TypeScript-Projekt startet mit einer tsconfig.json, und jeder Entwickler hat schon mal eine von einer zufaelligen Stack-Overflow-Antwort kopiert, nur um zwei Tage spaeter einen Build-Fehler zu kassieren. Es gibt rund 150 Compiler-Optionen, die Doku liest sich wie ein Steuerformular.
Der Builder laesst dich von einem Preset starten, das die offizielle Vorlage fuer deinen Stack spiegelt: Next.js, Vite (React), publishbare npm-Library oder Node-API. Jede Option erscheint als Switch oder Dropdown mit Klartext-Hinweis, der erklaert, was sie wirklich macht.
Das Live-Preview-Panel rechts zeigt das resultierende JSON, fertig zum Kopieren oder Runterladen. Schalter um, JSON aendert sich. Kein Raten, kein "habe ich gespeichert?", kein zweiter Tab zum TypeScript-Handbuch.
So nutzt du das Tool
- Waehl ein Preset fuers Projekt. Next.js fuer typische Next-14+-Apps, Vite (React) fuer moderne Vite-Apps, npm-Library beim Publishen, Node-API fuer Backend-Services. Custom fuer leere Leinwand.
- Schau in die Pflicht-Basics: target, module, moduleResolution und strict. Diese vier entscheiden 80% deiner tsconfig. Der Hinweis sagt, wann was.
- Ist strict an, oeffnet sich die Strict-Mode-Section mit sieben Unter-Optionen. Jede faengt eine andere Bug-Klasse.
- In Module und Imports: esModuleInterop an (fast immer gewuenscht), resolveJsonModule wenn du `.json` importierst, forceConsistentCasingInFileNames fuer plattformuebergreifende Teams.
- In Output setz outDir (wo das compilte JS hingeht), schalt declaration wenn du Type-Dateien ausliefer, sourceMap fuer Browser-Debugging, incremental fuer schnellere Rebuilds.
- In JSX waehl react-jsx fuer React 17+, preserve wenn ein Bundler JSX behandelt (Next, Vite). Lass es `(keins)` fuer Backend.
- In Path-Aliases setz baseUrl (meist `.`) und fueg Aliases wie `@/*` -> `./src/*` hinzu. Klick Add alias fuer einen weiteren. Remove loescht eine Zeile.
- Rechts updatet das tsconfig.json-Preview beim Tippen. Klick Kopieren fuer die Zwischenablage oder Datei runterladen fuer die echte `tsconfig.json`.
Wann das nuetzlich ist
Sechs Situationen, in denen eine Ein-Klick-tsconfig gewinnt:
- Neues Projekt starten. Du willst eine Config, die "einfach funktioniert", ohne eine Stunde Doku zu lesen. Preset waehlen, Output kopieren, in 60 Sekunden fertig.
- Projekt zu Strict migrieren. Deine Codebase ist auf `strict: false`, du willst Schritt fuer Schritt strenger werden. Flag fuer Flag umschalten, JSON sehen, ins Repo pasten.
- Erstes npm-Package publishen. Du brauchst `declaration: true`, `isolatedModules`, ein `outDir`, kein DOM im lib-Array. Das npm-Library-Preset macht es fuer dich.
- Path-Aliases adden. Du willst `@/components/Button` statt `../../../components/Button`. Der Builder zeigt die korrekte Shape des paths-Objekts.
- Presets vergleichen. Unsicher, ob dein Stack auf NodeNext oder Bundler sein soll? Zwischen Presets klicken und JSON-Diff sehen.
- Neuen Dev onboarden. Jede Option hat einen Hinweis, ein Junior kann lesen, was noUncheckedIndexedAccess macht, statt in die Doku zu starren.