Babel-preset-proposal-typescript NPM

babel-preset-proposal-typescript

Yet another Babel preset for TypeScript, only transforms proposals which TypeScript does not support now.

So that you can use babel to transform proposals which are current in stage 0-2 and TypeScript team will not implement them temporarily.

Enabled proposal plugins

Install

# yarn
yarn add -D babel-preset-proposal-typescript

# npm
npm i -D babel-preset-proposal-typescript

Options

option	description	defaults
`decoratorsBeforeExport`	See Babel Document	`undefined`
`decoratorsLegacy`	Whether to use legacy decorators semantic	`true`
`importDefer`	Whether to enabled `import-defer` plugin, if true `transform-modules-commonjs` will be enabled automatically	`false`
`isTSX`	Whether to enable `jsx` plugin with `typescript`	`false`, but `true` for `/\.[jt]sx$/`
`optionalChainingAssignVersion`	Version for `optional-chaining-assign` plugin, only `'2023-07'` allowed for now	`'2023-07'`
`pipelineOperator`	Implementation of pipeline operator, `minimal`, `smart` or `fsharp`	`minimal`
`recordTuplePolyfill`	Whether to enable import `record-tuple` plugin and polyfill, or specific the polyfill module name	`true` for Node>=14.6, it represents `@bloomberg/record-tuple-polyfill`
`recordTupleSyntaxType`	`record-tuple` syntax, `hash` or `bar`	`hash`

Usage

Note that unlike plugins, the presets are applied in an order of last to first (https://babeljs.io/docs/en/presets/#preset-ordering), so please make sure proposal-typescript is used at the last.

Via `.babelrc` (Recommended)

.babelrc

{
  "presets": ["proposal-typescript"]
}

Via CLI

babel input.ts --presets proposal-typescript > output.ts

Via Node API

require('@babel/core').transform('code', {
  presets: ['proposal-typescript'],
})

Via webpack

Pipe codes through babel-loader.

loader = {
  test: /\.[jt]sx?$/,
  loader: 'babel-loader',
  options: {
    presets: ['@babel/typescript', 'proposal-typescript'],
  },
}

// if you prefer `ts-loader` or `awesome-typescript-loader`
loader = {
  test: /\.tsx?$/,
  use: [
    {
      loader: 'ts-loader',
    },
    {
      loader: 'babel-loader',
      options: {
        presets: ['proposal-typescript'],
      },
    },
  ],
}