Configuration d'une application TypeScript avec Bun

Si vous avez déjà géré des projets TypeScript avec Node.js, vous connaissez les frictions : installer ts-node ou tsx, configurer une étape de build, câbler vos scripts, et seulement ensuite commencer à écrire du code. Bun élimine la majeure partie de cette surcharge. C’est un runtime JavaScript moderne qui exécute directement les fichiers TypeScript, intègre un gestionnaire de paquets natif et agit comme un task runner—le tout dans un seul outil. Ce guide vous accompagne à travers la configuration complète d’un projet TypeScript avec Bun afin que vous puissiez passer de zéro à l’exécution de TypeScript en quelques minutes.

Qu’est-ce que Bun et pourquoi l’utiliser pour TypeScript ?

Bun est un runtime JavaScript rapide construit sur JavaScriptCore et écrit en Zig. Ce qui le distingue pour le développement TypeScript, c’est qu’il transpile nativement les fichiers .ts et .tsx à l’exécution—aucune étape de build séparée n’est requise. Contrairement à la combinaison Node.js + ts-node, Bun gère la transpilation en interne, ce qui signifie des temps de démarrage nettement plus rapides et un workflow de développement simplifié.

Au-delà du runtime, Bun remplace plusieurs outils à la fois :

• Runtime – exécute directement TypeScript et JavaScript
• Gestionnaire de paquets – alternative plus rapide à npm, yarn ou pnpm
• Task runner – exécute les scripts définis dans package.json

Créer un nouveau projet TypeScript avec Bun

Commencez par installer Bun, puis générez un nouveau projet :

bun init

Bun vous demandera un point d’entrée. Utilisez src/index.ts pour garder les choses organisées :

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

Cela génère une structure de projet minimale :

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

Le fichier bun.lock est le fichier de verrouillage des dépendances de Bun utilisé par le gestionnaire de paquets de Bun pour garantir des installations cohérentes.

Installer les définitions de types Bun

Si @types/bun n’est pas déjà présent dans votre projet, installez-le comme dépendance de développement pour obtenir une IntelliSense appropriée et la vérification de types pour les API spécifiques à Bun :

bun add -d @types/bun

Cela vous donne un accès typé aux API natives de Bun comme Bun.serve(), Bun.file() et bun:sqlite. Consultez la documentation TypeScript officielle de Bun pour plus de détails.

Configuration tsconfig.json recommandée pour les projets Bun

Bun fonctionne sans tsconfig.json, mais vous en voudrez un pour le support IDE et la vérification de types. Le paramètre clé pour la configuration TypeScript de Bun est "moduleResolution": "bundler", qui s’aligne sur la façon dont Bun résout les modules en interne.

Autres options importantes à inclure :

• "target": "ESNext" et "lib": ["ESNext"] — utilisez les fonctionnalités JavaScript modernes
• "strict": true — détectez les erreurs tôt
• "noEmit": true — Bun gère l’exécution, vous n’avez donc pas besoin de sortie compilée
• "verbatimModuleSyntax": true — garantit des imports type-only propres
• "allowImportingTsExtensions": true — vous permet d’importer des fichiers .ts avec leurs extensions

Voici un exemple complet :

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

⚠️ Important : Le transpileur de Bun supprime les annotations de type pour la rapidité—il n’effectue pas de vérification complète des types à l’exécution. Exécutez bunx tsc --noEmit séparément pendant le développement ou dans votre CI pour détecter les erreurs de typage.

Exécuter des fichiers TypeScript et gérer les scripts

Exécuter un fichier TypeScript avec Bun est simple :

bun run src/index.ts

Pour le développement avec redémarrages automatiques lors des modifications de fichiers, utilisez le mode watch :

bun --watch src/index.ts

Ajoutez vos workflows courants aux scripts package.json :

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

Bun exécute ces scripts directement—aucun task runner supplémentaire n’est nécessaire.

Ce que Bun couvre d’autre

Une fois votre configuration de projet TypeScript avec Bun en place, vous avez accès à plusieurs capacités natives sans ajouter de dépendances :

• Test runner — bun test supporte une API compatible Jest dès le départ
• Bundler — bun build gère le bundling des assets frontend
• SQLite — bun:sqlite fournit une interface de base de données native et typée

Ces fonctionnalités ne sont pas requises pour une configuration de base, mais elles sont disponibles dès que vous en avez besoin. Vous pouvez explorer l’ensemble complet des fonctionnalités dans la documentation officielle de Bun.

Conclusion

Le principal changement lors de l’utilisation de TypeScript avec Bun est d’accepter que le runtime gère la transpilation tandis que tsc gère la sécurité des types—ce sont des préoccupations séparées. Une fois que c’est clair, le workflow est simple : initialisez un projet, installez @types/bun si nécessaire, configurez votre tsconfig.json avec la résolution de modules de style bundler, et exécutez vos fichiers TypeScript directement. Pas de pipeline de build à maintenir, pas d’outils supplémentaires à installer.

FAQ

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.