Erstes TypeScript-Projekt erstellen
Erstes TypeScript-Projekt
~12 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026
Jetzt richten wir die eigentliche TypeScript-Konfiguration ein und schreiben die erste, lauffähige Datei unseres Bibliotheksverwaltungs-Projekts.
tsconfig.json anlegen
tsconfig.json steuert, WIE TypeScript unseren Code prüft und kompiliert – die zentrale Konfigurationsdatei jedes TypeScript-Projekts. Statt sie von Hand zu schreiben, lassen wir sie generieren:
npx tsc --initDas erzeugt eine tsconfig.json mit VIELEN auskommentierten Optionen als Dokumentation. Wir ersetzen sie durch eine schlanke, bewusst gewählte Konfiguration:
{
"compilerOptions": {
"target": "ES2022",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"outDir": "dist",
"rootDir": "src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src/**/*"]
}Die wichtigsten Optionen im Detail
"target": "ES2022"– bis zu welcher JavaScript-Version TypeScript beim Kompilieren "herunterstufen" darf. Neuere Node.js-Versionen unterstützen ES2022 nativ, daher kein Grund, auf ältere Syntax zurückzufallen."module"/"moduleResolution": "NodeNext"– passt zu unserem"type": "module"auspackage.json(Kapitel 2), nutzt moderne ES-Module-Auflösung statt des älteren CommonJS-Systems."outDir"/"rootDir"– bestimmen, WOHIN kompilierte.js-Dateien landen (dist/) und WOHER TypeScript-Quelldateien gelesen werden (src/) – wichtig fürnpm run buildaus Kapitel 2."strict": true– aktiviert ALLE strengen Typprüfungen auf einmal (u. a.strictNullChecks,noImplicitAny) – für ein NEUES Projekt IMMER empfohlen, wir werden im gesamten Tutorial darauf aufbauen."skipLibCheck": true– überspringt die Typprüfung von.d.ts-Dateien innode_modules– deutlich schnellere Kompilierung, ohne Typfehler in FREMDEN Bibliotheken zu riskieren.
src/index.ts: die erste Datei
console.log('Willkommen in der Bibliotheksverwaltung!');npm startnpm start (bzw. tsx src/index.ts direkt) gibt "Willkommen in der Bibliotheksverwaltung!" in der Konsole aus – tsx kompiliert die Datei dabei transparent im Hintergrund, ohne dass irgendwo eine .js-Datei sichtbar entsteht.
Einen absichtlichen Fehler provozieren
Um strict: true in Aktion zu sehen, fügen Sie testweise diese Zeile hinzu:
let anzahlBuecher: number = 42;
anzahlBuecher = 'zweiundvierzig'; // Fehler!Ihr Editor unterstreicht 'zweiundvierzig' ROT: "Type 'string' is not assignable to type 'number'." – GENAU der Moment, den wir in Kapitel 1 konzeptionell besprochen haben, jetzt live im eigenen Projekt. Entfernen Sie die fehlerhafte Zeile wieder, bevor Sie fortfahren.
Die Zielstruktur dieses Projekts
Aktueller Stand nach diesem Kapitel – wächst über die kommenden Kapitel deutlich
bibliotheks-app/
├── package.json
├── tsconfig.json
└── src/
└── index.tsTipp: npm run typecheck (aus Kapitel 2) ist ab jetzt Ihr wichtigstes Kommando, um den GESAMTEN Typ-Zustand des Projekts zu prüfen, unabhängig davon, welche einzelne Datei Sie gerade bearbeiten – nutzen Sie es regelmäßig, besonders vor größeren Refactorings.