@babel/preset-typescript

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

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

const x: number = 0;

const x = 0;

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




    

yarn add --dev @babel/preset-typescript

pnpm add --save-dev @babel/preset-typescript

通过配置文件（推荐） ​

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

通过命令行工具（CLI） ​

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

通过 Node API ​

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

isTSX ​

boolean 类型，默认值为 false 。

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

jsxPragma ​

string 类型，默认值为 React 。

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

jsxPragmaFrag ​

string , defaults to React.Fragment

Replace the function used when compiling JSX fragment expressions. This is so that we know that the import is not a type import, and should not be removed.

allExtensions ​

boolean 类型，默认值为 false 。

Indicates that every file should be parsed as TS, TSX, or as TS without JSX ambiguities (depending on the isTSX and disallowAmbiguousJSXLike options).

allowNamespaces ​

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

Added in: v7.6.0

开启 TypeScript 命名空间的编译。

allowDeclareFields ​

boolean 类型，默认值为 false 。

添加于： v7.7.0

注意：此参数在 Babel 8 中将默认开启。

When enabled, type-only class fields are only removed if they are prefixed with the declare modifier:

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

disallowAmbiguousJSXLike ​

boolean , defaults to true for .mts and .cts files and to false otherwise.

Added in: v7.16.0

Even when JSX parsing is not enabled, this option disallows using syntax that would be ambiguous with JSX ( <X> y type assertions and <X>() => {} type arguments). It matches the tsc behavior when parsing .mts and .mjs files.

ignoreExtensions ​

boolean , defaults to false

Added in: v7.21.4

When it is set to false , Babel will automatically provide required plugins for *.ts , *.tsx , *.mts and *.cts files.

When it is set to true , Babel will provide a general TS plugin. If you want to transpile source as if it were *.tsx , enable the @babel/preset-react preset and this plugin should work with the JSX transform seamlessly. For example,

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

onlyRemoveTypeImports ​

boolean 类型，默认值为 false 。

添加于： v7.9.0

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

optimizeConstEnums ​

boolean , defaults to false

Added in: v7.15.0

When set to true , Babel will inline enum values rather than using the usual enum output:

// 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);

This option differs from TypeScript's --isolatedModules behavior, which ignores the const modifier and compiles them as normal enums, and aligns Babel's behavior with TypeScript's default behavior.

However, when exporting a const enum Babel will compile it to a plain object literal so that it doesn't need to rely on cross-file analysis when compiling it:

// Input
export const enum Animals {
  Fish,
}

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

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

rewriteImportExtensions ​

boolean , defaults to false

Added in: v7.23.0

When set to true , Babel will rewrite .ts / .mts / .cts extensions in import declarations to .js / .mjs / .cjs .