Skip to content

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

License

Notifications You must be signed in to change notification settings

un-ts/babel-preset-proposal-typescript

Repository files navigation

babel-preset-proposal-typescript

GitHub Actions Codecov npm GitHub Release

Conventional Commits Renovate enabled JavaScript Style Guide Code Style: Prettier changesets

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

  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

Sponsors

1stG RxTS UnTS
1stG Open Collective backers and sponsors RxTS Open Collective backers and sponsors UnTS Open Collective backers and sponsors

Backers

Backers

1stG RxTS UnTS
1stG Open Collective backers and sponsors RxTS Open Collective backers and sponsors UnTS Open Collective backers and sponsors

Changelog

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

License

MIT © JounQin@1stG.me