{"id":10552,"library":"babel-preset-proposal-typescript","title":"Babel Preset for TypeScript Proposals","description":"The `babel-preset-proposal-typescript` (currently v4.0.0) is a Babel preset designed to enable experimental ECMAScript proposals in TypeScript projects that TypeScript itself does not yet natively support. This includes features like async do expressions, record and tuple, pipeline operator, and more, allowing developers to utilize cutting-edge syntax while still leveraging TypeScript's type-checking capabilities for standard features. The preset maintains an active development pace, with major versions typically aligned with updates to its core peer dependencies: `@babel/core` (currently `^7.23.0`) and `typescript` (currently `^5.3.0`). Its primary differentiator is its focused scope: it specifically fills the gap for proposals that the TypeScript team explicitly postpones or chooses not to implement, avoiding redundant transformations with `@babel/preset-typescript` or other standard presets.","status":"active","version":"4.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/un-ts/babel-preset-proposal-typescript","tags":["javascript","babel-preset","babel-preset-ts","babel-preset-typescript","@babel/preset-ts","@babel/preset-typescript","babel-typescript","typescript"],"install":[{"cmd":"npm install babel-preset-proposal-typescript","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-proposal-typescript","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-proposal-typescript","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Babel compilation. The preset integrates with Babel's core functionalities.","package":"@babel/core","optional":false},{"reason":"Required for TypeScript parsing and type-checking, as this preset augments TypeScript's syntax support.","package":"typescript","optional":false}],"imports":[{"note":"This package is a Babel preset and is not imported directly into JavaScript/TypeScript files. It is configured within your Babel configuration file (e.g., `.babelrc.json` or `babel.config.js`) as an entry in the `presets` array.","wrong":"import preset from 'babel-preset-proposal-typescript';","symbol":"Babel Preset Configuration","correct":"{ \"presets\": [\"babel-preset-proposal-typescript\"] }"},{"note":"When using the Babel Node API, you might dynamically load presets. Use `require()` to obtain the preset function, which is then passed to Babel's transform functions, typically as part of a configuration object.","wrong":"import { PresetName } from 'babel-preset-proposal-typescript';","symbol":"Babel Node API Usage","correct":"require('babel-preset-proposal-typescript')"}],"quickstart":{"code":"{\n  \"plugins\": [\n    // Ensure decorators are enabled if you use them, and are correctly configured.\n    // Babel's order matters: proposals before official features.\n  ],\n  \"presets\": [\n    [\"@babel/preset-env\", { \"targets\": { \"node\": \"current\" } }],\n    \"@babel/preset-typescript\",\n    \"babel-preset-proposal-typescript\"\n  ]\n}\n// Example index.ts\nasync function runDoExpression() {\n  const result = await do {\n    let x = 10;\n    if (x > 5) {\n      await Promise.resolve(x * 2);\n    } else {\n      x * 3;\n    }\n  };\n  console.log('Do expression result:', result);\n}\n\nrunDoExpression();\n\nconst tuple: [string, number] = #['hello', 123];\nconsole.log('Tuple element:', tuple[0]);\n\nfunction pipelineExample(value: number) {\n  return value\n    |> ((x) => x * 2)\n    |> ((x) => x + 1);\n}\nconsole.log('Pipeline result:', pipelineExample(5));\n\n// package.json script\n// \"scripts\": {\n//   \"build\": \"babel src/index.ts --out-dir dist --extensions \\\".ts\\\"\"\n// }\n","lang":"typescript","description":"Demonstrates how to configure Babel with `babel-preset-proposal-typescript` to compile TypeScript code utilizing experimental ECMAScript proposals like `do expressions`, `record and tuple`, and `pipeline operator`."},"warnings":[{"fix":"Ensure `@babel/core` is `^7.23.0` or higher and `typescript` is `^5.3.0` or higher in your `package.json` peer dependencies. Then run `npm install` or `yarn install`.","message":"Version 4.0.0 requires `@babel/core@^7.23.0` and `typescript@^5.3.0`. Users on older versions of Babel or TypeScript will need to upgrade their peer dependencies.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Upgrade your `typescript` dependency to `^4.7.0` or later. Review your Babel configuration as some previously managed plugins might now be handled natively by TypeScript or are no longer needed.","message":"Version 3.0.0 upgraded the minimum `typescript` peer dependency to `v4.7` and removed some internal plugins. This might cause compatibility issues for projects still using older TypeScript versions.","severity":"breaking","affected_versions":">=3.0.0 <4.0.0"},{"fix":"Consult the changelog for `v2.0.0` to identify specific plugin changes or removals. Upgrade your Babel and TypeScript peer dependencies to meet the new requirements.","message":"Version 2.0.0 introduced breaking changes by bumping both Babel and TypeScript minimum versions and adding new proposals. Specific details might vary, but expect potential configuration and dependency conflicts.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"fix":"For `nullish-coalescing-operator` and `optional-chaining`, ensure your project uses TypeScript 3.7.0 or newer and that `@babel/preset-typescript` (or similar) is configured to handle modern TypeScript syntax. This preset is strictly for proposals TypeScript *does not* yet support.","message":"Since `v1.5.0`, `nullish-coalescing-operator` and `optional-chaining` transformations were dropped as TypeScript 3.7.0 introduced native support for these features. Relying on this preset for these specific transformations will no longer work.","severity":"gotcha","affected_versions":">=1.5.0"},{"fix":"Regularly review the changelog for this preset and the TypeScript release notes. Ensure your Babel configuration remains lean, relying on `@babel/preset-typescript` for standard TypeScript features and this preset only for the explicitly unsupported proposals.","message":"This preset only transforms proposals which TypeScript does not *currently* support. As TypeScript evolves and adopts new ECMAScript proposals, this preset may remove plugins for those features. This could lead to unexpected behavior if your build relies on the preset transforming a feature that TypeScript has since adopted.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `babel-preset-proposal-typescript` is listed in your `devDependencies` and installed: `npm install --save-dev babel-preset-proposal-typescript` or `yarn add -D babel-preset-proposal-typescript`.","cause":"The package is not installed or incorrectly referenced in `package.json`.","error":"Cannot find module 'babel-preset-proposal-typescript'"},{"fix":"Upgrade `@babel/core` to the required version: `npm install --save-dev @babel/core@^7.23.0` or `yarn add -D @babel/core@^7.23.0`.","cause":"Your installed `@babel/core` version does not meet the peer dependency requirement of `babel-preset-proposal-typescript@4.0.0`.","error":"Requires Babel '^7.23.0'"},{"fix":"Upgrade `typescript` to the required version: `npm install --save-dev typescript@^5.3.0` or `yarn add -D typescript@^5.3.0`.","cause":"Your installed `typescript` version does not meet the peer dependency requirement of `babel-preset-proposal-typescript@4.0.0`.","error":"Requires TypeScript '^5.3.0'"},{"fix":"Ensure the preset is listed as a simple string `\"babel-preset-proposal-typescript\"` or an array `[\"babel-preset-proposal-typescript\", { /* options */ }]` if you need to pass options.","cause":"Incorrect format for the preset entry in `.babelrc` or `babel.config.js`.","error":"Error: .babelrc configuration is invalid. presets[2] must be a string"}],"ecosystem":"npm"}