將 Babel 與 TypeScript 搭配使用

針對 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