TypeScript 自定义事件监听器

Question

我认为我在这里的理解中遗漏了一些相当重要的东西，所以也许一点解释也会非常有帮助。

我有一堂课，如下：

class Entity {
    protected pos: number = [0,0];

    ...

    public setPos(x: number, y: number) {
        this.pos = [x, y];
    }
}

想要类似的东西

class EntityPositionListener {
    //do stuff when an Entity position changes
}

我也有Entity班级的后代。因此，每当任何后代Entity或其Entity本身更改pos变量（在给定实例中）时，我都想知道它，以便我可以更新地图上的位置，并捕获实例，以便理论上我可以做其他事情事情到那个例子。

我注意到 Firefox 有这个Object.watch()命令，并且我找到了有人在另一个问题中发布的“跨浏览器”解决方案 - 无济于事 - 并且我尝试Entity在初始化后阶段“包装”该类，但是后者最终会覆盖Entity类或创建无限循环，所以我显然在某个地方错过了重点。如果包装是答案，我该如何在 TypeScript 中做到这一点？JS 版本创建了循环或不起作用。

//This created an infinite loop in runtime, but more importantly overwrote the Entity class
function EntityListener(name) {
    cout(name);
}
var oldEntity = Entity;
function Entity(name) {
    if (typeof EntityListener === "function") {
        EntityListener(name);
    }

    oldEntity(name);
}

理想情况下，我想听听给定类的几件事——例如在游戏更新循环中——这个特殊情况仅用于演示。我发现了无数的链接，其中许多是 JS 而不是明确的 TypeScript，所以我真的很想要一个 TypeScript 解决方案以及一些关于正在发生的事情的解释。我只是从根本上不明白如何解决这个问题。

编辑

如果这是问题的更好版本，也许更简单，我如何监听Entity.setPos()被呼叫？

Answer 1

Object.observe很可能会被丢弃。Object.watch仅在 Gecko 中受支持，因此除非您仅针对 Firefox，否则请勿在代码中使用它。

这意味着您必须编写自己的事件发射。如果您喜欢，可以使用 TypeScript getter 和 setter：

class Entity {
    private entitityListener:EntityPositionListener;
    private _pos:number[] = [];

    get pos():number[] {
        return this._pos;
    }
    set pos(value:number[]) {            
        this._pos = value;

        if (this.entitityListener) {
            this.entitityListener.reportEvent('pos', value);
        }
    }
}

class SuperEntity extends Entity {

}

let superEntity = new SuperEntity();
superEntity.pos = [1,2]; // this will call 'this.entitityListener.reportEvent()' and you don't need superEntity.setPos([1,2]);

其转换为：

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Entity = (function () {
    function Entity() {
        this._pos = [];
    }
    Object.defineProperty(Entity.prototype, "pos", {
        get: function () {
            return this._pos;
        },
        set: function (value) {
            this._pos = value;
            if (this.entitityListener) {
                this.entitityListener.reportEvent('pos', value);
            }
        },
        enumerable: true,
        configurable: true
    });
    return Entity;
})();
var SuperEntity = (function (_super) {
    __extends(SuperEntity, _super);
    function SuperEntity() {
        _super.apply(this, arguments);
    }
    return SuperEntity;
})(Entity);
var superEntity = new SuperEntity();
superEntity.pos = [1, 2];

您可以使用Object.defineProperty()定义 getter 和 setter，这意味着您可以定义 setter 来包含对方法的调用EntityListener。