跳至主内容

@babel/preset-typescript

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

如果您使用 TypeScript（JavaScript 的类型化超集），我们推荐使用此预设。它包含以下插件：

您需要为 @babel/cli 和 @babel/node 命令行工具指定 --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"]
}

通过命令行​

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

通过 Node API​

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

配置选项​

isTSX​

boolean，默认值 false

强制启用 jsx 解析。否则，尖括号将被视为 TypeScript 的旧式类型断言 var foo = <string>bar;。此外，isTSX: true 要求 allExtensions: true。

jsxPragma​

string，默认值 React

替换编译 JSX 表达式时使用的函数。这有助于识别该导入并非类型导入，不应被移除。

jsxPragmaFrag​

string，默认值 React.Fragment

替换编译 JSX 片段表达式时使用的函数。这有助于识别该导入并非类型导入，不应被移除。

allExtensions​

boolean，默认值 false

表示每个文件都应被解析为 TS、TSX 或避免 JSX 歧义的 TS（具体取决于 isTSX 和 disallowAmbiguousJSXLike 选项）。

allowNamespaces​

boolean，使用 @babel/plugin-transform-typescript 设置的默认值。

添加于：v7.6.0

启用 TypeScript 命名空间的编译支持。

allowDeclareFields​

boolean，默认值 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​

boolean，默认值 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​

boolean，默认值 false

添加于：v7.9.0

设为 true 时，转换器仅移除纯类型导入（TypeScript 3.8 引入）。仅当使用 TypeScript ≥ 3.8 时启用此选项。

optimizeConstEnums​

boolean，默认值 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​

boolean，默认值 false

添加于：v7.23.0

当设为 true 时，Babel 会将导入声明中的 .ts/.mts/.cts 扩展名重写为 .js/.mjs/.cjs。此选项与 TypeScript 的 rewriteRelativeImportExtensions 选项一致。

此选项与 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"。