@babel/plugin-transform-typescript

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.

README

@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 namespaces. Workaround: Move to using file exports, or migrate to using the module { } syntax instead.
• Does not support const enums 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"]
});