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

Question

我正试图通过使用@babel/preset-TypeScript和@babel/env的组合将TypeScript类库编译到ES5。如果没有任何插件，它会导致编译错误：

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

我被困在这里了。在官方文档中，没有提到推荐的类属性转换插件。我试着使用@babel/plugin-projection-class属性，这是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.值未定义，而不是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模块样板不会被应用两次。

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