Question

现在我想实现一个数组代理。这是我的代码

class ArrayProxy<T> extends Array<T> {

    constructor(data: T[]) {
        super(...data);
    }

    push(...items: T[]): number {
        var res = super.push(...items);
        console.log("push invoked!");
        // some code to do extra operation.
        return res;
    }
}

var foo = new ArrayProxy(["aa","bb"]);
foo.push("cc");

似乎没有调用我的覆盖推送方法。并且foo变量是ArrayProxy以外的Array的实例 我的打字稿版本：2.3.2
tsconfig.json

{
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "moduleResolution": "classic",
        "target": "es5",
        "module": "system",
        "outFile": "js/test.js"
    }
}

MyTest的
我寻找一些解决方案，但失败了。

class MyNewArray<T> extends Array<T> {
    getFirst() {
        return this[0];
    }
}

var myArray = new MyNewArray<string>();
myArray.push("First Element");
console.log(myArray.getFirst()); // "First Element"

来自David Sherret的

但我得到了错误。

Uncaught (in promise) Error: myArray.getFirst is not a function
  Evaluating http://localhost:8080/application/test/application/ts/bind_test
  Loading application/ts/bind_test
    at Object.execute (test.js:1733)
    at j (system.js:4)
    at E (system.js:4)
    at O (system.js:4)
    at system.js:5

更新当我在ArrayProxy的构造函数中进行超级调用之后添加Object.setPrototypeOf(this, ArrayProxy.prototype);时它会起作用。感谢@Aluan Haddad。

Answer 1

子类化内置函数目前已被破坏。

这也非常危险，因为当代码在符合es2015的环境中执行时，对Map等函数会失败。

使用构图并避免使用这些技巧。

请参阅此处以供参考：https://github.com/Microsoft/TypeScript-wiki/blob/master/Breaking-Changes.md#extending-built-ins-like-error-array-and-map-may-no-longer-work

如何在typescript中扩展和覆盖数组方法

1 个答案: