{"id":12767,"library":"babel-preset-typescript","title":"Babel TypeScript Preset","description":"`@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.","status":"active","version":"7.0.0-alpha.19","language":"javascript","source_language":"en","source_url":"https://github.com/babel/babel/tree/master/packages/babel-preset-typescript","tags":["javascript","babel-preset","typescript"],"install":[{"cmd":"npm install babel-preset-typescript","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-typescript","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-typescript","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for any Babel preset to function.","package":"@babel/core","optional":false},{"reason":"The core plugin that performs the TypeScript syntax stripping. Included by this preset.","package":"@babel/plugin-transform-typescript","optional":false},{"reason":"Provides syntax support for object rest/spread properties, often used with TypeScript. Included by this preset.","package":"@babel/plugin-syntax-object-rest-spread","optional":false}],"imports":[{"note":"Presets are configured under the `presets` key, not `plugins`. Prefer the full package name `@babel/preset-typescript` for clarity over the shorthand `typescript`.","wrong":"{\n  \"plugins\": [\n    \"@babel/preset-typescript\"\n  ]\n}","symbol":"typescript (in .babelrc.json)","correct":"{\n  \"presets\": [\n    \"@babel/preset-typescript\"\n  ]\n}"},{"note":"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.","wrong":"// babel.config.js\nmodule.exports = {\n  presets: [\n    '@babel/preset-typescript' // No array for options or just 'typescript'\n  ]\n};","symbol":"@babel/preset-typescript (in babel.config.js)","correct":"// babel.config.js\nmodule.exports = {\n  presets: [\n    ['@babel/preset-typescript', {\n      // options for the preset\n      is='value'\n    }]\n  ]\n};"},{"note":"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.","wrong":"const babel = require('babel-core'); // Deprecated package\nbabel.transform(code, { presets: ['typescript'] });","symbol":"transformAsync (Node API)","correct":"import * as babel from '@babel/core';\n\nconst code = `const x: number = 42;`;\nconst result = await babel.transformAsync(code, {\n  filename: 'input.ts', // Important for preset to recognize TS\n  presets: [\n    ['@babel/preset-typescript', { allowDeclareFields: true }],\n    ['@babel/preset-env', { targets: { node: 'current' } }]\n  ]\n});\nconsole.log(result?.code);"}],"quickstart":{"code":"import * as babel from '@babel/core';\n\nconst typescriptCode = `\ninterface Shape { \n  area(): number;\n}\n\nclass Circle implements Shape {\n  constructor(public radius: number) {}\n  area(): number {\n    return Math.PI * this.radius * this.radius;\n  }\n}\n\nconst myCircle: Circle = new Circle(10);\nconsole.log('Circle area:', myCircle.area());\n\nconst greeting: string = 'Hello Babel!';\nconsole.log(greeting);\n`;\n\nasync function transformTsCode() {\n  try {\n    const result = await babel.transformAsync(typescriptCode, {\n      filename: 'example.ts', // Essential for Babel to correctly apply TS preset\n      presets: [\n        ['@babel/preset-typescript', {\n          // Example option: allows properties of classes to be declared without an initializer\n          allowDeclareFields: true\n        }],\n        ['@babel/preset-env', {\n          // Transpile for the current Node.js version\n          targets: { node: 'current' }\n        }]\n      ]\n    });\n\n    console.log('--- Original TypeScript Code ---\\n', typescriptCode);\n    console.log('\\n--- Transformed JavaScript Code (via Babel) ---\\n', result?.code);\n  } catch (error) {\n    console.error('Babel transformation failed:', error);\n  }\n}\n\ntransformTsCode();\n","lang":"typescript","description":"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."},"warnings":[{"fix":"Integrate a separate type-checking step into your build process using the TypeScript compiler (`tsc --noEmit`) to ensure type safety.","message":"Babel'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.","severity":"gotcha","affected_versions":">=7.0.0"},{"fix":"Migrate away from `module <identifier>` declarations to standard ES module imports/exports or the `namespace` keyword if appropriate for your use case.","message":"Starting with Babel 8, support for the legacy TypeScript `module <identifier>` syntax (internal modules/namespaces) has been dropped.","severity":"breaking","affected_versions":">=8.0.0-beta.4"},{"fix":"Ensure the order in your `presets` array is `['@babel/preset-typescript', ...otherPresets]` so that TypeScript syntax is stripped before other transformations occur.","message":"`@babel/preset-typescript` must typically be listed before `@babel/preset-env` (or other syntax-transforming presets) in your Babel configuration `presets` array.","severity":"gotcha","affected_versions":">=7.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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', {...}]`.","cause":"The `@babel/preset-typescript` package is not installed or incorrectly referenced in your Babel configuration.","error":"SyntaxError: Cannot find preset 'typescript' relative to file"},{"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' }}]]`.","cause":"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.","error":"SyntaxError: Private field '#myField' must be declared in an enclosing class"},{"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] };`.","cause":"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.","error":"ReferenceError: require is not defined in ES module scope"}],"ecosystem":"npm"}