无法分配给只读属性：Typescript + Babel

Question

我编译的打字稿在运行时遇到问题。我的链是 Typescript -> es6 模块 -> webpack + babelify。

有问题的文件是

import Registry from "../registry";

class Alert {

    public static name = "alert";

    public static options = {
        template: require("./alert.mustache")
    };
}

Registry.register(Alert);

这是通过 es2015 插件 + webpack 编译到

"use strict";

var _registry = __webpack_require__(14);

var _registry2 = _interopRequireDefault(_registry);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Alert = function Alert() {
    _classCallCheck(this, Alert);
};

Alert.name = "alert";
Alert.options = {
    template: __webpack_require__(16)
};
_registry2.default.register(Alert);
//# sourceMappingURL=alert.js.map

/*****************
 ** WEBPACK FOOTER
 ** alert.js
 ** module id = 15
 ** module chunks = 0
 **/

但是在执行时，得到这个错误：

alert.js:15 Uncaught TypeError: Cannot assign to read only property 'name' of function Alert() {
    _classCallCheck(this, Alert);
}

我尝试了很多不同的方法，但我不明白为什么在类上使用静态属性会导致这个问题。

提前致谢。

Answer 1

name 属性是描述函数名称的reserved property on functions，即用于function foo()、foo.name === 'foo'。它在 EcmaScript 规范中定义为只读属性。因此，您的转译代码最终会尝试分配给您的 Alert 函数的 name 属性，该属性是只读的，并且失败：

var Alert = function Alert() {
    _classCallCheck(this, Alert);
};

// This is not allowed, because
// [[Function]].name is a read-only property.
Alert.name = "alert";

Answer 2

代码：

class Alert {

    public static name = "alert";

在运行时无效。您不能编写 function 的 name 属性（如果您转译为 es5，这就是类）。使用instanceof 运算符进行类实例检查。

There is an open issue on github to turn this into a compiler error.