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

【问题标题】：How to compile TypeScript classes with @babel/preset-typescript?如何使用@babel/preset-typescript 编译 TypeScript 类？
【发布时间】：2020-04-07 17:37:51
【问题描述】：

我正在尝试通过结合使用 @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 中，没有提到推荐的类属性转换插件。我尝试使用@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 的正确方法是什么？

【问题讨论】：

标签： typescript babeljs babel-preset-env

【解决方案1】：

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

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

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

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

【讨论】：