What is @babel/plugin-transform-typescript?
The @babel/plugin-transform-typescript package is a Babel plugin that allows Babel to parse and transform TypeScript code into JavaScript. It strips out type annotations and compiles the code down to a version of JavaScript that can run in current and older browsers or environments.
What are @babel/plugin-transform-typescript's main functionalities?
TypeScript Syntax Transformation
Transforms TypeScript syntax by removing type annotations to produce valid JavaScript code. The code sample shows a TypeScript variable with a type annotation that would be stripped out.
const x: number = 10;
TypeScript Namespaces
Handles TypeScript namespaces and transforms them into a format that can be understood by JavaScript environments. The code sample demonstrates a namespace declaration that would be transformed.
namespace MyNamespace { export const x: number = 10; }
Enums
Compiles TypeScript enums into objects that preserve the enum semantics in JavaScript. The code sample shows an enum that would be converted into a JavaScript object.
enum Directions { Up, Down, Left, Right }
Other packages similar to @babel/plugin-transform-typescript
typescript
The official TypeScript compiler that converts TypeScript code to JavaScript. It provides type checking along with the transformation, which @babel/plugin-transform-typescript does not do.
ts-loader
A TypeScript loader for webpack. It works in conjunction with the TypeScript compiler to transpile TypeScript files in webpack builds, similar to how @babel/plugin-transform-typescript works with Babel.
awesome-typescript-loader
Another TypeScript loader for webpack that aims to be faster than ts-loader. It also provides Babel-like transformation of TypeScript code but is specifically designed for webpack's module bundling.
@babel/plugin-transform-typescript
Transform TypeScript into ES.next.
Does not type-check its input. For that, you will need to install and set up TypeScript.
Caveats
- Does not support
namespace
s. Workaround: Move to using file exports, or migrate to using the module { }
syntax instead. - Does not support
const enum
s because those require type information to compile.
Workaround: Remove the const
, which makes it available at runtime. - Does not support
export =
and import =
, because those cannot be compile to ES.next. Workaround: Convert to using export default
and export const
, and import x, {y} from "z"
.
Example
In
const x: number = 0;
Out
const x = 0;
Installation
npm install --save-dev @babel/plugin-transform-typescript
Usage
Via .babelrc
(Recommended)
.babelrc
{
"plugins": ["@babel/plugin-transform-typescript"]
}
Via CLI
babel --plugins @babel/plugin-transform-typescript script.js
Via Node API
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-typescript"]
});
Options
jsxPragma
string
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