メインコンテンツにスキップ

@babel/preset-typescript

このプリセットは、JavaScriptの型付きスーパーセットであるTypeScriptを使用する場合に推奨されます。以下のプラグインが含まれています。

.tsファイルを処理するには、@babel/cliと@babel/node CLIで--extensions ".ts"を指定する必要があります。

例​

入力

const x: number = 0;

出力

JavaScript
const x = 0;

インストール​

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

使用方法​

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

CLI経由​

シェル
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);

このオプションは、const修飾子を無視して通常の列挙型としてコンパイルするTypeScriptの--isolatedModulesの動作とは異なり、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はimport宣言の.ts / .mts / .cts拡張子を.js / .mjs / .cjsに書き換えます。

このオプションは、TypeScriptのallowImportingTsExtensionオプションと組み合わせて使用​​すると、ソースファイルで使用されているのと同じ拡張子を使用しながら、import宣言に完全な相対指定子を書くことができます。

例として、次のプロジェクト構造（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"に変換します。