跳转到主要内容

@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​

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 的 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"。