babel-preset-proposal-typescript

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.

TOC

• Enabled proposal plugins
• Install
• Options
• Usage
  • Via .babelrc (Recommended)
  • Via CLI
  • Via Node API
  • Via webpack
• References
• Sponsors
• Backers
• Changelog
• License

Enabled proposal plugins

1. async-do-expressions
2. destructuring-private
3. do-expressions
4. duplicate-named-capturing-groups-regex
5. function-bind
6. function-sent
7. import-defer
8. import-wasm-source
9. optional-chaining-assign
10. partial-application
11. pipeline-operator
12. record-and-tuple
13. regexp-modifiers
14. throw-expressions
15. v8intrinsic - Further Detail

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'],
      },
    },
  ],
}

References

• TC39 Proposals
• Babel Proposals

Sponsors

1stG	RxTS	UnTS

Backers

1stG	RxTS	UnTS

Changelog

Detailed changes for each release are documented in CHANGELOG.md.

License

MIT © [e-mail]

Changelog

4.0.0

Major Changes

• #167 bca62a1 Thanks @JounQin! - feat!: bump @babel/core@^7.23.0 and typescript@^5.3.0