babel-preset-proposal-typescript

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

Usage no npm install needed!

<script type="module">
  import babelPresetProposalTypescript from 'https://cdn.skypack.dev/babel-preset-proposal-typescript';
</script>

README

babel-preset-proposal-typescript

GitHub Actions Codecov Codacy Grade npm GitHub Release

David Peer David David Dev

Conventional Commits Renovate enabled JavaScript Style Guide Code Style: Prettier codechecks.io

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. class-properties
  3. class-static-block
  4. do-expressions
  5. function-bind
  6. function-sent
  7. json-strings
  8. partial-application
  9. pipeline-operator
  10. private-property-in-object
  11. record-and-tuple
  12. throw-expressions
  13. v8intrinsic - Further Detail

Install

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

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

Options

option description defaults
classLoose whether to use loose mode for class-static-block, class-properties and private-methods undefined
decoratorsBeforeExport See Babel Document undefined
decoratorsLegacy whether to use legacy decorators semantic true
isTSX whether to enable jsx plugin with typescript false, but true for /\.[jt]sx$/
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'],
      },
    },
  ],
}

Changelog

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

License

MIT © JounQin@1stG.me