Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›

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 --init

Das erzeugt eine tsconfig.json mit VIELEN auskommentierten Optionen als Dokumentation. Wir ersetzen sie durch eine schlanke, bewusst gewählte Konfiguration:

tsconfig.json
{
  "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" aus package.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ür npm run build aus 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 in node_modules – deutlich schnellere Kompilierung, ohne Typfehler in FREMDEN Bibliotheken zu riskieren.

src/index.ts: die erste Datei

src/index.ts
console.log('Willkommen in der Bibliotheksverwaltung!');
npm start

npm 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.ts

Tipp: 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.