@babel/preset-typescript

This preset is recommended if you use TypeScript, a typed superset of JavaScript. It includes the following plugins:

You will need to specify --extensions ".ts" for @babel/cli & @babel/node cli’s to handle .ts files.

Example

In

  1. const x: number = 0;

Out

JavaScript

  1. const x = 0;

Installation

  • npm
  • Yarn
  • pnpm
  1. npm install --save-dev @babel/preset-typescript
  1. yarn add --dev @babel/preset-typescript
  1. pnpm add --save-dev @babel/preset-typescript

Usage

babel.config.json

  1. {
  2. "presets": ["@babel/preset-typescript"]
  3. }

Via CLI

Shell

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

Via Node API

JavaScript

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

Options

isTSX

boolean, defaults to false

Forcibly enables jsx parsing. Otherwise angle brackets will be treated as typescript’s legacy type assertion var foo = <string>bar;. Also, isTSX: true requires allExtensions: true.

jsxPragma

string, defaults to React

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

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, defaults to 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, uses the default set by @babel/plugin-transform-typescript.

Added in: v7.6.0

Enables compilation of TypeScript namespaces.

allowDeclareFields

boolean, defaults to false

Added in: v7.7.0

NOTE: This will be enabled by default in Babel 8

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

  1. class A {
  2. declare foo: string; // Removed
  3. bar: string; // Initialized to undefined
  4. prop?: string; // Initialized to undefined
  5. prop1!: string // Initialized to undefined
  6. }

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,

babel.config.json

  1. {
  2. "presets": ["@babel/preset-react"],
  3. "overrides": [{
  4. "test": "*.vue",
  5. "presets": [
  6. ["@babel/preset-typescript"], { "ignoreExtensions": true }
  7. ]
  8. }]
  9. }

onlyRemoveTypeImports

boolean, defaults to false

Added in: v7.9.0

When set to true, the transform will only remove type-only imports (introduced in TypeScript 3.8). This should only be used if you are using 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:

  1. // Input
  2. const enum Animals {
  3. Fish
  4. }
  5. console.log(Animals.Fish);
  6. // Default output
  7. var Animals;
  8. (function (Animals) {
  9. Animals[Animals["Fish"] = 0] = "Fish";
  10. })(Animals || (Animals = {}));
  11. console.log(Animals.Fish);
  12. // `optimizeConstEnums` output
  13. 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:

  1. // Input
  2. export const enum Animals {
  3. Fish,
  4. }
  5. // `optimizeConstEnums` output
  6. export var Animals = {
  7. Fish: 0,
  8. };

You can read more about configuring preset options here.

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.

This option, when used together with TypeScript’s allowImportingTsExtension option, allows to write complete relative specifiers in import declarations while using the same extension used by the source files.

As an example, given this project structure (where src contains the source files, and dist the compiled files):

  1. .
  2. ├── src
  3. ├── main.ts
  4. └── dep.ts
  5. ├── dist
  6. ├── main.js
  7. └── dep.js
  8. ├── babel.config.json
  9. └── tsconfig.json

and with the following configuration files:

babel.config.jsontsconfig.json
  1. {
  2. presets”: [
  3. [“@babel/preset-typescript”, {
  4. rewriteImportExtensions”: true
  5. }]
  6. ]
  7. }
  1. {
  2. compilerOptions”: {
  3. lib”: [“esnext”],
  4. noEmit”: true,
  5. isolatedModules”: true,
  6. moduleResolution”: nodenext”,
  7. allowImportingTsExtensions”: true
  8. }
  9. }

you will be able to write import x from "./dep.ts" in main.ts, and Babel will transform it to import x from "./dep.js" when compiling main.ts to main.js.