跳至主要內容

@babel/preset-typescript

如果你使用 TypeScript，一個 JavaScript 的類型化超集，建議使用此預設值。它包含下列外掛程式

你必須為 @babel/cli 和 @babel/node cli 指定 --extensions ".ts" 來處理 .ts 檔案。

範例​

輸入

const x: number = 0;

輸出

JavaScript
const x = 0;

安裝​

npm install --save-dev @babel/preset-typescript

用法​

babel.config.json
{
  "presets": ["@babel/preset-typescript"]
}

透過 CLI​

Shell
babel --presets @babel/preset-typescript script.ts

透過 Node API​

JavaScript
require("@babel/core").transformSync("code", {
  presets: ["@babel/preset-typescript"],
  filename: 'script.ts',
});

選項​

isTSX​

布林值，預設為 false

強制啟用 jsx 解析。否則，尖括號將被視為 typescript 的舊式類型斷言 var foo = <string>bar;。此外，isTSX: true 需要 allExtensions: true。

jsxPragma​

字串，預設為 React

取代編譯 JSX 表達式時使用的函式。這樣我們就知道匯入不是類型匯入，不應移除。

jsxPragmaFrag​

字串，預設為 React.Fragment

取代編譯 JSX 片段表達式時使用的函式。這是為了讓我們知道匯入不是類型匯入，不應移除。

allExtensions​

布林值，預設為 false

表示每個檔案都應該解析為 TS、TSX，或沒有 JSX 模糊性的 TS（根據 isTSX 和 disallowAmbiguousJSXLike 選項）。

allowNamespaces​

boolean，使用 @babel/plugin-transform-typescript 設定的預設值。

新增於：v7.6.0

啟用編譯 TypeScript 名稱空間。

allowDeclareFields​

布林值，預設為 false

新增於：v7.7.0

注意：這會在 Babel 8 中預設啟用

啟用時，只有加上 declare 修飾詞的類型專用類別欄位才會移除

class A {
  declare foo: string; // Removed
  bar: string; // Initialized to undefined
  prop?: string; // Initialized to undefined
  prop1!: string // Initialized to undefined
}

disallowAmbiguousJSXLike​

boolean，預設為 .mts 和 .cts 檔案的 true，其他檔案則為 false。

新增於：v7.16.0

即使未啟用 JSX 解析，此選項仍禁止使用會與 JSX 混淆的語法（<X> y 類型斷言和 <X>() => {} 類型引數）。它與解析 .mts 和 .mjs 檔案時的 tsc 行為相符。

ignoreExtensions​

布林值，預設為 false

新增於：v7.21.4

設定為 false 時，Babel 會自動提供 *.ts、*.tsx、*.mts 和 *.cts 檔案所需的外掛程式。

設定為 true 時，Babel 會提供一個通用的 TS 外掛程式。如果您想將程式碼轉譯為 *.tsx，請啟用 @babel/preset-react 預設值，此外掛程式應可與 JSX 轉換無縫運作。例如，

babel.config.json
{
  "presets": ["@babel/preset-react"],
  "overrides": [{
    "test": "*.vue",
    "presets": [
      ["@babel/preset-typescript"], { "ignoreExtensions": true }
    ]
  }]
}

onlyRemoveTypeImports​

布林值，預設為 false

新增於：v7.9.0

設定為 true 時，轉換只會移除 僅類型匯入（於 TypeScript 3.8 中推出）。這只應在使用 TypeScript >= 3.8 時使用。

optimizeConstEnums​

布林值，預設為 false

新增於：v7.15.0

設定為 true 時，Babel 會內嵌列舉值，而不是使用一般的 enum 輸出

// Input
const enum Animals {
  Fish
}
console.log(Animals.Fish);

// Default output
var Animals;

(function (Animals) {
  Animals[Animals["Fish"] = 0] = "Fish";
})(Animals || (Animals = {}));

console.log(Animals.Fish);

// `optimizeConstEnums` output
console.log(0);

此選項不同於 TypeScript 的 --isolatedModules 行為，後者會忽略 const 修飾詞並將其編譯為一般列舉，並使 Babel 的行為與 TypeScript 的預設行為一致。

然而，在匯出const enum 時，Babel 會將其編譯為純粹的物件文字，以便在編譯時不必依賴跨檔案分析

// Input
export const enum Animals {
  Fish,
}

// `optimizeConstEnums` output
export var Animals = {
  Fish: 0,
};

您可以在 此處閱讀更多有關設定預設選項的資訊。

rewriteImportExtensions​

布林值，預設為 false

新增於：v7.23.0

設定為 true 時，Babel 會將匯入宣告中的 .ts/.mts/.cts 副檔名改寫為 .js/.mjs/.cjs。

此選項與 TypeScript 的 allowImportingTsExtension 選項搭配使用時，允許在匯入宣告中撰寫完整的相對指定符，同時使用與原始檔案相同的副檔名。

舉例來說，假設有以下專案結構（其中 src 包含原始檔案，而 dist 包含已編譯檔案）

.
├── src
│   ├── main.ts
│   └── dep.ts
├── dist
│   ├── main.js
│   └── dep.js
├── babel.config.json
└── tsconfig.json

以及以下設定檔

babel.config.jsontsconfig.json
{
  "presets": [
    ["@babel/preset-typescript", {
      "rewriteImportExtensions": true
    }]
  ]
}
{
  "compilerOptions": {
    "lib": ["esnext"],
    "noEmit": true,
    "isolatedModules": true,
    "moduleResolution": "nodenext",
    "allowImportingTsExtensions": true
  }
}

您可以在 main.ts 中撰寫 import x from "./dep.ts"，而 Babel 會在將 main.ts 編譯為 main.js 時，將其轉換為 import x from "./dep.js"。