Einrichten einer TypeScript-App mit Bun

Wenn Sie TypeScript-Projekte mit Node.js verwaltet haben, kennen Sie die Reibungsverluste: ts-node oder tsx installieren, einen Build-Schritt konfigurieren, Ihre Skripte einrichten und erst dann mit dem Schreiben von Code beginnen. Bun beseitigt den Großteil dieses Overheads. Es ist eine moderne JavaScript-Runtime, die TypeScript-Dateien direkt ausführt, mit einem integrierten Paketmanager ausgeliefert wird und als Task-Runner fungiert – alles in einem Tool. Dieser Leitfaden führt Sie durch die vollständige Einrichtung eines Bun-TypeScript-Projekts, sodass Sie in wenigen Minuten von null auf lauffähiges TypeScript kommen.

Was ist Bun und warum sollte man es für TypeScript verwenden?

Bun ist eine schnelle JavaScript-Runtime, die auf JavaScriptCore basiert und in Zig geschrieben ist. Was sie für die TypeScript-Entwicklung besonders macht, ist, dass sie .ts- und .tsx-Dateien nativ zur Laufzeit transpiliert – kein separater Build-Schritt erforderlich. Im Gegensatz zur Kombination aus Node.js + ts-node übernimmt Bun die Transpilierung intern, was deutlich schnellere Startzeiten und einen einfacheren Entwicklungs-Workflow bedeutet.

Über die Runtime hinaus ersetzt Bun mehrere Tools auf einmal:

• Runtime – führt TypeScript und JavaScript direkt aus
• Paketmanager – schnellere Alternative zu npm, yarn oder pnpm
• Task-Runner – führt in package.json definierte Skripte aus

Erstellen eines neuen Bun-TypeScript-Projekts

Beginnen Sie mit der Installation von Bun und erstellen Sie dann ein neues Projekt:

bun init

Bun fordert Sie zur Angabe eines Einstiegspunkts auf. Verwenden Sie src/index.ts, um die Dinge organisiert zu halten:

entry point (index.ts): src/index.ts

Dies erzeugt eine minimale Projektstruktur:

my-app/
├── src/
│   └── index.ts
├── package.json
├── tsconfig.json
└── bun.lock

Die bun.lock-Datei ist Buns Abhängigkeits-Lockfile, die vom Paketmanager von Bun verwendet wird, um konsistente Installationen sicherzustellen.

Installation der Bun-Typdefinitionen

Falls @types/bun noch nicht in Ihrem Projekt vorhanden ist, installieren Sie es als Dev-Dependency, um ordnungsgemäße IntelliSense und Typprüfung für Bun-spezifische APIs zu erhalten:

bun add -d @types/bun

Dies gibt Ihnen typisierten Zugriff auf Buns integrierte APIs wie Bun.serve(), Bun.file() und bun:sqlite. Weitere Details finden Sie in der offiziellen Bun-TypeScript-Dokumentation.

Empfohlene tsconfig.json für Bun-Projekte

Bun funktioniert ohne tsconfig.json, aber Sie werden eine für IDE-Unterstützung und Typprüfung benötigen. Die wichtigste Einstellung für die Bun-TypeScript-Konfiguration ist "moduleResolution": "bundler", die sich daran orientiert, wie Bun Module intern auflöst.

Weitere wichtige Optionen, die Sie einbeziehen sollten:

• "target": "ESNext" und "lib": ["ESNext"] — moderne JavaScript-Features verwenden
• "strict": true — Fehler frühzeitig erkennen
• "noEmit": true — Bun übernimmt die Ausführung, daher benötigen Sie keine kompilierte Ausgabe
• "verbatimModuleSyntax": true — stellt saubere Type-only-Imports sicher
• "allowImportingTsExtensions": true — ermöglicht den Import von .ts-Dateien mit ihren Erweiterungen

Hier ist ein vollständiges Beispiel:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "lib": ["ESNext"],
    "strict": true,
    "noEmit": true,
    "verbatimModuleSyntax": true,
    "allowImportingTsExtensions": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

⚠️ Wichtig: Buns Transpiler entfernt Typ-Annotationen für mehr Geschwindigkeit – er führt keine vollständige Typprüfung zur Laufzeit durch. Führen Sie bunx tsc --noEmit separat während der Entwicklung oder in der CI aus, um Typfehler zu erkennen.

Ausführen von TypeScript-Dateien und Verwalten von Skripten

Das Ausführen einer TypeScript-Datei mit Bun ist unkompliziert:

bun run src/index.ts

Für die Entwicklung mit automatischen Neustarts bei Dateiänderungen verwenden Sie den Watch-Modus:

bun --watch src/index.ts

Fügen Sie Ihre gängigen Workflows zu den package.json-Skripten hinzu:

{
  "scripts": {
    "dev": "bun --watch src/index.ts",
    "start": "bun run src/index.ts",
    "typecheck": "bunx tsc --noEmit"
  }
}

Bun führt diese Skripte direkt aus – kein zusätzlicher Task-Runner erforderlich.

Was Bun sonst noch abdeckt

Sobald Ihre Bun-TypeScript-Projekteinrichtung abgeschlossen ist, haben Sie Zugriff auf mehrere integrierte Funktionen, ohne Abhängigkeiten hinzufügen zu müssen:

• Test-Runner — bun test unterstützt eine Jest-kompatible API out of the box
• Bundler — bun build übernimmt das Bundling von Frontend-Assets
• SQLite — bun:sqlite bietet eine native, typisierte Datenbankschnittstelle

Diese sind für ein grundlegendes Setup nicht erforderlich, stehen aber zur Verfügung, sobald Sie sie benötigen. Sie können den vollständigen Funktionsumfang in der offiziellen Bun-Dokumentation erkunden.

Fazit

Die Hauptveränderung bei der Verwendung von TypeScript mit Bun besteht darin, zu akzeptieren, dass die Runtime die Transpilierung übernimmt, während tsc für die Typsicherheit zuständig ist – es sind separate Anliegen. Sobald das klar ist, ist der Workflow sauber: Initialisieren Sie ein Projekt, installieren Sie bei Bedarf @types/bun, konfigurieren Sie Ihre tsconfig.json mit Bundler-Style-Modulauflösung und führen Sie Ihre TypeScript-Dateien direkt aus. Keine Build-Pipeline zu warten, keine zusätzlichen Tools zu installieren.

FAQs

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.