Bun.js with TypeScript

📦 Getting Started with Bun.js and TypeScript

Bun.js is revolutionizing the JavaScript runtime space with its incredible speed and modern features. But what makes it even more developer-friendly is its seamless support for TypeScript right out of the box!

🎉 No more configuring compilers or worrying about build steps — Bun handles it for you.

In this tutorial, we'll walk you through using TypeScript in Bun.js projects step-by-step.

⚙️ Why TypeScript with Bun.js?

Using TypeScript in your Bun.js project gives you the best of both worlds:

• Type safety to catch bugs before they happen
• Better developer experience with autocomplete and tooling
• Native support with zero configuration

And yes, Bun understands `.ts` and `.tsx` files natively. No need for Babel, ts-node, or Webpack!

📁 Setting Up a Bun + TypeScript Project

Let’s kick things off by creating a new Bun project with TypeScript support.

bun init

During the setup process, Bun will automatically detect TypeScript files and generate a `tsconfig.json` for you.

If not, you can manually create one:

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "esModuleInterop": true,
    "jsx": "react-jsx"
  },
  "exclude": ["node_modules"]
}

🧪 Writing Your First TypeScript File

Create a file named index.ts and add the following code:

// index.ts
function greet(name: string): string {
  return `Hello, ${name}! 👋`;
}

console.log(greet("TypeScript + Bun"));

Then run it directly using:

bun index.ts

No build step. No transpiler. Just instant execution! âš¡

📦 Importing ES Modules in TypeScript

You can import other `.ts` or `.tsx` files just like you would in a standard ES module project:

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}

// index.ts
import { add } from "./math.ts";
console.log(add(3, 4)); // Output: 7

Notice you must include the file extension (e.g., .ts) when importing — this is how Bun resolves modules.

🛠️ Installing TypeScript Types

If you're working with packages that require types, you can install them via Bun just like npm:

bun add @types/node

Bun supports both ESM and CommonJS modules, but you should stick with ESM for best results.

🔍 Running Type Checking

Even though Bun runs TypeScript files without compiling, you should still type-check your code using:

tsc --noEmit

This will validate your types without generating output files.

🔥 Bun with tsx for Hot Reloading

Want hot reloading for your TS files? Use the tsx package:

bun add -d tsx

Then run your app with:

bunx tsx watch index.ts

This provides a real-time feedback loop — perfect for local development! 🚀

✅ Conclusion

Bun.js and TypeScript are a match made in developer heaven! With Bun’s native TypeScript support, blazing-fast execution, and no bundling overhead, your dev experience becomes super smooth.

Whether you're building CLIs, APIs, or full-stack apps, combining Bun with TypeScript gives you confidence, clarity, and raw performance.

Ready to code faster and safer? Bun + TypeScript has got your back. 💪🐰

---