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

TypeScript-Entwicklungsumgebung einrichten

Entwicklungsumgebung einrichten

~10 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026

Bevor wir mit dem eigentlichen Bibliotheksverwaltungs-Projekt beginnen, richten wir die nötigen Werkzeuge ein: Node.js, den TypeScript-Compiler, und einen modernen Weg, TypeScript-Dateien direkt auszuführen, ohne nach jeder Änderung manuell kompilieren zu müssen.

Node.js installieren

Node.js ist die JavaScript-Laufzeitumgebung, auf der unser Projekt aufbaut – laden Sie die aktuelle LTS-Version von nodejs.org herunter, oder nutzen Sie einen Versionsmanager wie nvm. Prüfen Sie die Installation:

node --version
npm --version

TypeScript: global vs. projektlokal

TypeScript LÄSST sich global installieren (npm install -g typescript), aber die empfohlene Praxis ist eine PROJEKTLOKALE Installation – jedes Projekt kann dann seine eigene TypeScript-Version pflegen, unabhängig davon, was global installiert ist (wichtig, wenn verschiedene Projekte unterschiedliche TypeScript-Versionen brauchen).

tsx: TypeScript-Dateien direkt ausführen

Der klassische Weg wäre: .ts-Datei mit tsc zu .js kompilieren, DANN das Ergebnis mit node ausführen – zwei Schritte bei JEDER Änderung. tsx ist ein moderner Runner, der beide Schritte in EINEM Befehl kombiniert: .ts-Dateien direkt ausführen, kompiliert "on the fly" im Hintergrund.

Das Bibliotheksverwaltungs-Projekt anlegen

mkdir bibliotheks-app
cd bibliotheks-app
npm init -y
npm install --save-dev typescript tsx @types/node

@types/node verdient besondere Erwähnung: TypeScript selbst kennt eingebaute JavaScript-APIs (Array, Promise, ...), aber NICHT Node.js-spezifische Globals (process, require, Dateisystem-Module) – @types/node liefert genau diese fehlenden Typdefinitionen nach.

package.json
{
  "name": "bibliotheks-app",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "start": "tsx src/index.ts",
    "build": "tsc",
    "typecheck": "tsc --noEmit"
  },
  "devDependencies": {
    "@types/node": "^22.0.0",
    "tsx": "^4.19.0",
    "typescript": "^5.6.0"
  }
}

"type": "module" aktiviert native ES-Module-Syntax (import/export) statt des älteren CommonJS-Systems (require) – der heute übliche Standard für neue Node.js-Projekte, den wir in diesem Tutorial durchgehend verwenden werden.

  • npm start – führt src/index.ts DIREKT über tsx aus, für die tägliche Entwicklung.
  • npm run build – kompiliert das GESAMTE Projekt zu echtem JavaScript (für einen späteren Produktions-Einsatz, nicht Thema der ersten Kapitel).
  • npm run typecheck – prüft NUR auf Typfehler, ohne irgendeine Datei zu erzeugen (--noEmit) – der schnellste Weg, den GESAMTEN Typ-Zustand des Projekts zu verifizieren.

Editor-Empfehlung: VS Code

TypeScript wurde von Microsoft entwickelt, VS Code ebenso – die Integration ist entsprechend nahtlos: TypeScript-Fehler erscheinen LIVE im Editor, ohne tsc manuell aufzurufen, Autovervollständigung funktioniert sofort ohne Zusatzkonfiguration. Andere Editoren (WebStorm, Neovim mit LSP) funktionieren ebenfalls gut, benötigen aber teils zusätzliche Plugins für denselben Komfort.

Tipp: Legen Sie jetzt schon einen leeren src/-Ordner an – im nächsten Kapitel füllen wir ihn mit der ersten index.ts-Datei und richten die eigentliche TypeScript-Konfiguration (tsconfig.json) ein.