@babel/预设打字稿

如果您使用了 TypeScript 这一 JavaScript 超集，则建议您使用此预设（preset）。它包含以下插件：

• @babel/plugin-transform-typescript

你需要为 @babel/cli和 @babel/node命令行工具指定 --extensions ".ts"参数，以使其能够处理 .ts文件。

示例​ (opens new window)

输入

const x: number = 0;

输出

JavaScript

const x = 0;

安装​ (opens new window)

• npm

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

• yarn

yarn add --dev @babel/preset-typescript

用法​ (opens new window)

通过配置文件（推荐）​ (opens new window)

babel.config.json

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

通过命令行工具（CLI）​ (opens new window)

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

通过 Node API​

JavaScript

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

参数​ (opens new window)

isTSX​ (opens new window)

boolean类型，默认值为 false。

强制开启 jsx解析。否则，尖括号将被视为 typescript 的类型断言（type assertion） var foo = <string>bar;。另外，isTSX: true需要 allExtensions: true

jsxPragma​ (opens new window)

string类型，默认值为 React。

替换编译 JSX 表达式时所使用的函数。这样我们就能知道是 import 而不是 type import，因此不应将其删除。

jsxPragmaFrag​ (opens new window)

string, 默认为React.Fragment

替换编译 JSX 片段表达式时使用的函数。这是为了让我们知道导入不是类型导入，不应删除。

allExtensions​ (opens new window)

boolean类型，默认值为 false。

指示每个文件都应解析为 TS、TSX 或没有 JSX 歧义的 TS（取决于isTSX和disallowAmbiguousJSXLike选项）。

allowNamespaces​ (opens new window)

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

添加于：v7.6.0

开启 TypeScript 命名空间的编译。

allowDeclareFields​ (opens new window)

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​ (opens new window)

boolean，默认为true和.mts文件.cts，false否则为。

添加于：v7.16.0

即使未启用 JSX 解析，此选项也不允许使用与 JSX 不明确的语法（<X> y类型断言和<X>() => {}类型参数）。它匹配tsc解析.mts和.mjs文件时的行为。

onlyRemoveTypeImports​ (opens new window)

boolean类型，默认值为 false。

添加于：v7.9.0

当设置为 true时，转换时只是删除 type-only imports （在 TypeScript 3.8 版本中引入）。仅在使用 TypeScript >= 3.8 版本时才应使用此参数。

optimizeConstEnums​ (opens new window)

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 的默认行为对齐。

但是，导出Babel时const enum会将其编译为普通对象字面量，因此在编译时不需要依赖跨文件分析：

// Input
export const enum Animals {
  Fish,
}

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

您可以在 这里 可以阅读到更多有关配置预设参数的信息。