TypeScript 的继承在浏览器端不起作用

Question

之前的讨论：Inheritance TypeScript with exported class and modules

这是从ValidatorMessage.class.ts生成的源代码：

///<reference path='./def/lib.d.ts'/>
///<reference path='./def/node.d.ts'/>
var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var message = require("./Message.class");

var ValidatorMessage = (function (_super) {
    __extends(ValidatorMessage, _super);
    function ValidatorMessage() {
        _super.apply(this, arguments);
    }
    return ValidatorMessage;
})(message.Message);
exports.ValidatorMessage = ValidatorMessage;

但是当我在浏览器上加载它时（在 Grunt.js 合并和缩小之后），我得到了这个错误：

Uncaught TypeError: Cannot read property 'prototype' of undefined

就在该行之后：

__.prototype = b.prototype, d.prototype = new __();

(~线 6 & 7)

我不明白这个错误。即使我只放置从 TS 生成的源代码而不使用 Grunt，我也会得到同样的错误。

编辑：

console.log（消息）：

function Message(message, data, status) {
        "undefined" == typeof data && (data = !1), "undefined" == typeof status && (status = !1), 
        /**
        * Constants.
        */
        this.FIELD_NAME_MESSAGE = "m", this.FIELD_NAME_DATA = "d", this.FIELD_NAME_STATUS = "s", 
        this.EXCEPTION_BAD_JSON_CONTENT = 'Unable to parse JSON. Bad object/string attributes. (Missing message ("' + this.FIELD_NAME_MESSAGE + '" field) or status ("' + this.FIELD_NAME_MESSAGE + '" field)?', 
        this.EXCEPTION_BAD_JSON_TYPE = "Incorrect data type. Object or string expected.", 
        this._message = message, this._data = data, this._status = status;
    } 

Answer 1

由于您正在编译浏览器端，因此您需要使用--module amd 选项进行编译。您似乎使用--module commonjs 编译，这对于浏览器目标无效。

见：http://www.youtube.com/watch?v=KDrWLMUY0R0&hd=1

Answer 2

我在两年前解决了这个问题。

这是因为我的ValidatorMessage 继承了我的Message 类，但是加载顺序错误。

我使用的是 CommonJS （现在仍然使用，AMD 通过使所有内容异步并强制使用诸如 requireJS 之类的额外工具来吸引 IMO，如果您想在服务器和浏览器上共享源代码，最好不要使用 AMD，因为它在 Node 上确实不好。） 这是针对 Node 的，但也兼容浏览器（如果您以正确的顺序加载文件...）

使用 WebStorm IDE，我首先解决了关于编译 AMD 和 CommonJS 的问题，方法是使用两个“监视任务”，一个用于 CommonJS，一个用于 AMD，具有不同的文件集。但后来我开始像@basarat 所说的那样使用grunt-ts，这成功了。

如果您现在正在阅读本文，我建议不要使用 IDE 观察程序，而是使用 grunt-ts 和 [tsconfig.json][1] 文件。这是我找到的最好/最干净的解决方案。 grunt-ts 按照tsconfig 文件中的和规则很好地完成了编译工作。 （文件顺序、目标等）

---

原答案：

我为 WebStorm IDE (7.0) 编写了一个文档，可能与 6.x 及后续版本。

如果你没有使用 WebStorm，你可能正在使用 TypeScript Visual Studio，我希望有一些插件可以做同样的事情。 应该存在。如果你不使用VS，你应该明确地使用 WebStorm 作为 IDE，我用过的最好的。

本文档显示了我如何通过编译两个文件来解决我的问题 不同的目标。

配置 WebStorm 为 AMD 和 CommonJs 编译： （死链接） https://mega.co.nz/#!4Y8jkSwJ!BGWr2FROWYaqwdyQ4aRNczEF4bN37-EB1sO1LdVVux4

Answer 3

奇怪的是 typescript 会以这种方式编译它，因为它似乎在它被设置之前通过 ValidatorMessage 来扩展它甚至依赖于变量提升来使其工作，这通常被认为是不好的做法。更好的方法是：

var ValidatorMessage = (function (_super) {
    function ValidatorMessage() {
        _super.apply(this, arguments);
    }
    __extends(ValidatorMessage, _super);
    return ValidatorMessage;
})(message.Message);