Registry / serialization / babel-preset-typescript

babel-preset-typescript

library7.0.0-alpha.19jsnpmunverified

`@babel/preset-typescript` is a Babel preset specifically designed to strip TypeScript syntax from source code, converting it into standard JavaScript. It does not perform any type checking; its sole purpose is to remove type annotations, enums, and other TypeScript-specific constructs so that Babel can continue processing the resulting JavaScript. This allows developers to leverage Babel's extensive plugin ecosystem for further transformations, such as targeting older JavaScript environments with `@babel/preset-env` or integrating JSX transformations. The package is part of the Babel monorepo, maintaining an active release schedule with frequent patch and minor updates (often bi-weekly) and new major versions released periodically. As of April 2026, the `7.x` series is stable, with `7.29.2` being a recent patch, while the `8.x` series is in a release candidate phase, with `8.0.0-rc.3` being the latest. Its primary differentiator is enabling a unified transformation pipeline for projects using TypeScript in conjunction with various Babel features that the TypeScript compiler alone does not provide.

serialization

npm install babel-preset-typescript

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PRESET-TYPES

babel-preset-typescript

serializationjavascriptv7.0.0-alpha.19

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

typescript (in .babelrc.json)

✓ { "presets": [ "@babel/preset-typescript" ] }

✗ { "plugins": [ "@babel/preset-typescript" ] }

Presets are configured under the `presets` key, not `plugins`. Prefer the full package name `@babel/preset-typescript` for clarity over the shorthand `typescript`.

@babel/preset-typescript (in babel.config.js)

✓ // babel.config.js module.exports = { presets: [ ['@babel/preset-typescript', { // options for the preset is='value' }] ] };

✗ // babel.config.js module.exports = { presets: [ '@babel/preset-typescript' // No array for options or just 'typescript' ] };

When using `babel.config.js`, it's best practice to use an array for each preset, allowing for inline options. This also ensures correct resolution.

transformAsync (Node API)

✓ import * as babel from '@babel/core'; const code = `const x: number = 42;`; const result = await babel.transformAsync(code, { filename: 'input.ts', // Important for preset to recognize TS presets: [ ['@babel/preset-typescript', { allowDeclareFields: true }], ['@babel/preset-env', { targets: { node: 'current' } }] ] }); console.log(result?.code);

✗ const babel = require('babel-core'); // Deprecated package babel.transform(code, { presets: ['typescript'] });

The `babel-core` package is deprecated; use `@babel/core`. Always include `filename` when using the Node API to help Babel resolve presets correctly based on file extension. Also, pass presets as arrays with options.

This quickstart demonstrates how to use `@babel/preset-typescript` with `@babel/core` to strip TypeScript syntax and transpile to JavaScript, showing a simple class and type annotation.

import * as babel from '@babel/core'; const typescriptCode = ` interface Shape { area(): number; } class Circle implements Shape { constructor(public radius: number) {} area(): number { return Math.PI * this.radius * this.radius; } } const myCircle: Circle = new Circle(10); console.log('Circle area:', myCircle.area()); const greeting: string = 'Hello Babel!'; console.log(greeting); `; async function transformTsCode() { try { const result = await babel.transformAsync(typescriptCode, { filename: 'example.ts', // Essential for Babel to correctly apply TS preset presets: [ ['@babel/preset-typescript', { // Example option: allows properties of classes to be declared without an initializer allowDeclareFields: true }], ['@babel/preset-env', { // Transpile for the current Node.js version targets: { node: 'current' } }] ] }); console.log('--- Original TypeScript Code ---\n', typescriptCode); console.log('\n--- Transformed JavaScript Code (via Babel) ---\n', result?.code); } catch (error) { console.error('Babel transformation failed:', error); } } transformTsCode();

Debug

Known issues

gotchaBabel's TypeScript preset only strips type annotations; it does not perform type checking. This means your code will transpile even if it contains type errors.

fix

Integrate a separate type-checking step into your build process using the TypeScript compiler (`tsc --noEmit`) to ensure type safety.

affects: >=7.0.0

breakingStarting with Babel 8, support for the legacy TypeScript `module <identifier>` syntax (internal modules/namespaces) has been dropped.

fix

Migrate away from `module <identifier>` declarations to standard ES module imports/exports or the `namespace` keyword if appropriate for your use case.

affects: >=8.0.0-beta.4

gotcha`@babel/preset-typescript` must typically be listed before `@babel/preset-env` (or other syntax-transforming presets) in your Babel configuration `presets` array.

fix

Ensure the order in your `presets` array is `['@babel/preset-typescript', ...otherPresets]` so that TypeScript syntax is stripped before other transformations occur.

affects: >=7.0.0

Errors

Common errors & fixes

SyntaxError: Cannot find preset 'typescript' relative to file

The `@babel/preset-typescript` package is not installed or incorrectly referenced in your Babel configuration.

fix

Run `npm install --save-dev @babel/preset-typescript` or `yarn add --dev @babel/preset-typescript`. In your `.babelrc.json` or `babel.config.js`, ensure the preset is listed as `"@babel/preset-typescript"` or `['@babel/preset-typescript', {...}]`.

SyntaxError: Private field '#myField' must be declared in an enclosing class

Babel presets like `babel-preset-typescript` handle specific syntax. Modern JavaScript features (like private class fields, optional chaining, nullish coalescing) require `babel-preset-env` or specific plugins.

fix

Install `@babel/preset-env` (`npm install --save-dev @babel/preset-env`) and include it in your Babel configuration, typically after `babel-preset-typescript`. Example: `presets: [['@babel/preset-typescript'], ['@babel/preset-env', { targets: { node: 'current' }}]]`.

ReferenceError: require is not defined in ES module scope

You are attempting to use `require()` in an ES module environment, potentially within a `babel.config.js` or another configuration file that is treated as ESM.

fix

If your `babel.config.js` or similar file is in an ES module context, use `import` statements instead of `require()`. For Babel presets, this might look like `import presetTypescript from '@babel/preset-typescript'; export default { presets: [presetTypescript] };`.

Upgrade

Version history

7.0.0-alpha.19latest on npm

Audit

Dependencies

@babel/corerequiredRequired as a peer dependency for any Babel preset to function.

@babel/plugin-transform-typescriptrequiredThe core plugin that performs the TypeScript syntax stripping. Included by this preset.

@babel/plugin-syntax-object-rest-spreadrequiredProvides syntax support for object rest/spread properties, often used with TypeScript. Included by this preset.

Agent activity

16 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/babel/babel ↗

packagehttps://www.npmjs.com/package/babel-preset-typescript ↗