在 TypeScript 中使用 Babel

TypeScript：Babel 與 tsc 的對比

在構建現代 JavaScript 專案時，你可能會問自己：將檔案從 TypeScript 轉換為 JavaScript 的正確方法是什麼？

很多時候，答案是“視情況而定”，或者取決於專案，可能“已經有人為你做出了決定”。如果你正在使用現有的框架構建專案，例如 tsdx、Angular、NestJS 或 入門指南 中提到的任何框架，那麼這個決定已經為你處理好了。

不過，一個有用的啟發式準則是：

• 如果你的構建輸出與源輸入檔案基本相同？請使用 tsc
• 如果你需要一個具有多種潛在輸出的構建管道？請使用 babel 進行轉譯，並使用 tsc 進行型別檢查

使用 Babel 進行轉譯，使用 tsc 進行型別檢查

這是對於已有構建基礎設施的專案的一種常見模式，這些專案可能是從 JavaScript 程式碼庫遷移到 TypeScript 的。

這種技術是一種混合方法，使用 Babel 的 preset-typescript 來生成 JS 檔案，然後使用 TypeScript 進行型別檢查和 .d.ts 檔案生成。

透過利用 Babel 對 TypeScript 的支援，你可以使用現有的構建管道，並且由於 Babel 不會對你的程式碼進行型別檢查，因此通常可以獲得更快的 JS 生成速度。

型別檢查與 d.ts 檔案生成

使用 Babel 的缺點是你無法在 TS 到 JS 的轉換過程中獲得型別檢查。這意味著你在編輯器中遺漏的型別錯誤可能會潛入到生產程式碼中。

此外，Babel 無法為你的 TypeScript 程式碼建立 .d.ts 檔案，如果你的專案是一個庫，這可能會增加使用的難度。

為了解決這些問題，你可能需要設定一個使用 TSC 對專案進行型別檢查的命令。這通常意味著將部分 babel 配置複製到相應的 tsconfig.json 中，並確保啟用了以下標誌：

"compilerOptions": {
  // Ensure that .d.ts files are created by tsc, but not .js files
  "declaration": true,
  "emitDeclarationOnly": true,
  // Ensure that Babel can safely transpile files in the TypeScript project
  "isolatedModules": true
}

有關這些標誌的更多資訊：

• isolatedModules
• declaration, emitDeclarationOnly