Typescript 对象扩展了 Array<BoxModel> 不能再调用内部方法

Question

升级到使用最新 Typescript 版本 (2.2.1) 的 Ionic3 后，我面临着一个大问题。我有一个普通的 Typescript 类 BoxList，它扩展了 Array。所以它是带有一些我使用的额外自定义方法的普通数组。我有一个名为“allHit”的方法，它遍历数组并返回布尔值。问题是，在 Ionic2 中一切正常，但升级后，我不能再调用 this.boxList.allHit 方法，因为它会抛出异常：

-> main.js:1 ERROR TypeError: this.boxList.allHit is not a function(...)

代码：

import {BoxModel} from "./BoxModel";
export class BoxList extends Array<BoxModel> {

    constructor() {
        super();
    }

    public allHit(boxTarget: BoxModel) : boolean {
        return this.findIndex(box => box.doesMatch(boxTarget) && !box.isHit) === -1;
    }

    public findUntouchedBox() : BoxModel {
        return this.find(box => !box.isHit);
    }
}

以及从其他对象调用 allHit 方法：

public allBoxesAreHit() : boolean {
    return this.boxList.allHit(this.targetBox);
}

有人知道这里发生了什么吗？谢谢！

Answer 1

根据 Typescript 2.1 breaking changes:

作为用 super(...) 调用返回的值替换 this 的值的一部分，子类化 Error、Array 和其他可能不再按预期工作。这是因为 Error、Array 等的构造函数使用 ECMAScript 6 的 new.target 来调整原型链；但是，在 ECMAScript 5 中调用构造函数时，无法确保 new.target 的值。

尝试他们的建议并设置：

constructor() { 
   super(); 
  Object.setPrototypeOf(this, BoxList.prototype); 
}

在构造函数中。