TypeScript – 執行階段 | Bun 文件

Bun 將 TypeScript 視為一等公民。

注意 — 若要為 Bun API（例如 Bun 全域物件）新增類型宣告，請依照簡介 > TypeScript 的指示操作。本頁說明 Bun 執行環境如何執行 TypeScript 程式碼。

執行 `.ts` 檔案

Bun 可以直接執行 .ts 和 .tsx 檔案，就像原生 JavaScript 一樣，無需額外設定。如果您導入 .ts 或 .tsx 檔案（或匯出這些檔案的 npm 模組），Bun 會在內部將其轉譯為 JavaScript，然後執行該檔案。

注意 — 與其他建置工具類似，Bun 不會對檔案進行類型檢查。如果您希望捕捉靜態類型錯誤，請使用 tsc (官方 TypeScript CLI)。

轉譯仍然是必要的嗎？ — 由於 Bun 可以直接執行 TypeScript，您可能不需要轉譯 TypeScript 即可在生產環境中執行。Bun 在內部轉譯它執行的每個檔案（包括 .js 和 .ts），因此直接執行您的 .ts/.tsx 原始碼檔案的額外開銷可以忽略不計。

然而，如果您將 Bun 用作開發工具，但仍然以生產環境中的 Node.js 或瀏覽器為目標，您仍然需要轉譯。

路徑映射

在解析模組時，Bun 的執行環境會遵守在您的 tsconfig.json 中 compilerOptions.paths 定義的路徑映射。沒有其他執行環境會這樣做。

考慮以下 tsconfig.json。

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "data": ["./data.ts"]
    }
  }
}

Bun 將使用 baseUrl 來解析模組路徑。

// resolves to ./src/components/Button.tsx
import { Button } from "components/Button.tsx";

Bun 也會正確解析來自 "data" 的導入。

index.ts

data.ts

index.ts
import { foo } from "data";
console.log(foo); // => "Hello world!"

data.ts
export const foo = "Hello world!"

實驗性裝飾器

Bun 支援 TypeScript 5.0 之前的實驗性裝飾器語法。

hello.ts
// Simple logging decorator
function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function(...args: any[]) {
    console.log(`Calling ${propertyKey} with:`, args);
    return originalMethod.apply(this, args);
  };
}

class Example {
  @log
  greet(name: string) {
    return `Hello ${name}!`;
  }
}

// Usage
const example = new Example();
example.greet("world"); // Logs: "Calling greet with: ['world']"

若要啟用它，請將 "experimentalDecorators": true 新增至您的 tsconfig.json

tsconfig.json
{
  "compilerOptions": {
    // ... rest of your config
    "experimentalDecorators": true,
  },
}

我們通常不建議在新程式碼庫中使用它，但許多現有的程式碼庫已經開始依賴它。

emitDecoratorMetadata

Bun 支援您的 tsconfig.json 中的 emitDecoratorMetadata。這可以為原始碼檔案中裝飾的宣告啟用發射設計時類型元數據。

emit-decorator-metadata.ts
import "reflect-metadata";

class User {
  id: number;
  name: string;
}

function Injectable(target: Function) {
  // Get metadata about constructor parameters
  const params = Reflect.getMetadata("design:paramtypes", target);
  console.log("Dependencies:", params); // [User]
}

@Injectable
class UserService {
  constructor(private user: User) {}
}

// Creates new UserService instance with dependencies
const container = new UserService(new User());

若要啟用它，請將 "emitDecoratorMetadata": true 新增至您的 tsconfig.json

tsconfig.json
{
  "compilerOptions": {
    // ... rest of your config
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
  },
}

執行 .ts 檔案

路徑映射

實驗性裝飾器

emitDecoratorMetadata

執行 `.ts` 檔案