如何用@babel/preset-typescript编译TypeScript 类？

Question

我正在尝试使用@babel/preset-typescript 和@babel/env 的组合将TypeScript 类库编译为ES5。没有任何插件，导致编译错误：

SyntaxError: C:\projects\time\git\core\main\src\LocalDate.ts: Missing class properties transform.
  35 | class LocalDate {
  36 |
> 37 |  private _weekBasedYear: number = null;
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  38 |
  39 |  private constructor(readonly nativeUtc: Date) {
  40 |  }

我卡在这里了。在 official documentation, there's no reference to a recommended class properties transformation plugin. I tried to use @babel/plugin-proposal-class-properties 中，推荐用于 JS，但它似乎与 TypeScript 不兼容。例如，当我编译以下一对类:

abstract class ClassA {

    abstract readonly value: number;
}

export class ClassB extends ClassA {

    get value() {
        return 1;
    }
}

export const B = new ClassB();

生成如下JS代码：

var ClassA = function ClassA() {
  _classCallCheck(this, ClassA);

  _defineProperty(this, "value", void 0);
};

var ClassB = /*#__PURE__*/function (_ClassA) {
  _inherits(ClassB, _ClassA);

  function ClassB() {
    _classCallCheck(this, ClassB);

    return _possibleConstructorReturn(this, _getPrototypeOf(ClassB).apply(this, arguments));
  }

  _createClass(ClassB, [{
    key: "value",
    get: function get() {
      return 1;
    }
  }]);

  return ClassB;
}(ClassA);

exports.ClassB = ClassB;
var B = new ClassB();
exports.B = B;

这导致 B.value 未定义而不是 1。

我无法将我的 TypeScript 直接编译成 JS，因为我使用 ES6 API，而 TypeScript 编译器拒绝为我编译它的用法。

src/Zone.ts(51,14): error TS2339: Property 'isFinite' does not exist on type 'NumberConstructor'.
src/Zone.ts(58,10): error TS2339: Property 'startsWith' does not exist on type 'string'.
src/Zone.ts(143,15): error TS2339: Property 'isFinite' does not exist on type 'NumberConstructor'.

我希望库用户附加一个合适的 polyfill 以确保所有这些的可用性 API，但我不知道如何向 TypeScript 编译器解释这一点。

我的.babelrc:

{
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ],
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "browsers": [
            "last 2 versions",
            "IE >= 11"
          ]
        }
      }
    ],
    "@babel/preset-typescript"
  ],
  "parserOpts": {
    "strictMode": true
  },
  "sourceMaps": "inline"
}

编译命令：

node_modules/.bin/babel --extensions ".ts" src --out-dir dist

使用 Babel 将 TypeScript 类编译为 ES5 的正确方法是什么？

Answer 1

我通过分两步编译项目解决了这个问题：

node_modules/.bin/tsc
node_modules/.bin/babel --out-dir dist dist-tsc

TypeScript 应配置为编译成 ES6 或更高版本，以确保 CommonJS 模块样板文件不会被应用两次。

话虽如此，我不知道@babel/preset-typescript 是为了什么而创建的。

如何用@babel/preset-typescript编译TypeScript 类？

How to compile TypeScript classes with @babel/preset-typescript?

typescript

babeljs

babel-preset-env