@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
const x: number = 0;
Out
const x = 0;
Installation
npm install --save-dev @babel/preset-typescript
Usage
With a configuration file (Recommended)
{ "presets": ["@babel/preset-typescript"] }
Via CLI
babel --presets @babel/preset-typescript script.ts
Via Node API
require("@babel/core").transformSync("code", { presets: ["@babel/preset-typescript"], });
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:
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.
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:
// 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, };
You can read more about configuring preset options here.