Inheritance does not work for Array<T>

[ahagelstein]

TypeScript Version: [email protected]

Code

export class MyList extends Array<string> {

    private defaultValue = "default";

    public getItem(pos: number) {

        return this[pos] || this.defaultValue;
    }
}

const list = new MyList();
list.push(...["a", "b", "c"]);

const v1 = list.getItem(2);
console.log("Result: " + v1);

const v2 = list.getItem(3);
console.log("Result: " + v2);

Expected behavior:

with [email protected] the output is correct:

Result: c
Result: default

Actual behavior:

with [email protected] the following exception is thrown:

var v1 = list.getItem(2);
^

TypeError: list.getItem is not a function
at Object. (D:\Temp\code\test02.js:22:15)
at Module._compile (module.js:573:32)
at Object.Module._extensions..js (module.js:582:10)
at Module.load (module.js:490:32)
at tryModuleLoad (module.js:449:12)
at Function.Module._load (module.js:441:3)
at Module.runMain (module.js:607:10)
at run (bootstrap_node.js:382:7)
at startup (bootstrap_node.js:137:9)
at bootstrap_node.js:497:3

[aluanhaddad]

I believe the problem has to do with a change that was made to capture the values of super calls as this in the case of constructors that return. The problem is that Array is callable and returns an object with .prototype === Array.prototype. That gets used and returned instead of the this.

[ahagelstein]

Yes I also think so. But I can change the method to a function variable. Then the code works. What do you think, is this the right way to extend an Array?

export class MyList extends Array<string> {

    private defaultValue = "default";

    public getItem = (pos: number) => {

        return this[pos] || this.defaultValue;
    }
}

const list = new MyList();
list.push(...["a", "b", "c"]);

const v1 = list.getItem(2);
console.log("Result: " + v1);

const v2 = list.getItem(3);
console.log("Result: " + v2);

[aluanhaddad]

I don't think there's a good way to extend Array that works with ES2015 and downlevel emit.

Using a property instead of a method is fine if you don't expect your type to be subclassed and don't have extreme performance requirements. That's not the problem. The problem is that in ES5 the class will behave like a factory when called with new, but in ES2015 it will behave like a class when called with new.

A deeper problem is that since ES2015 classes are not callable at all your subclass won't have the intrinsic array function behavior of serving as a factory when not called with new.

[kitsonk]

This is basically the same domain as #12013.

In ES5 Arrays are not sub-classable and have some "magic" properties that cause issues/challenges. Traditionally, attempting to modify the behaviour of the array requires one of three approaches. 1) modify Array.prototype 2) decorate instances in a factory function with the desired functionality 3) use functions to perform the desired functionality.

As @aluanhaddad noted and discussed in the other issue, there really isn't a clean way to do it that works both with ES2015+ and ES5/ES3.

[ahagelstein]

Thanks. I will remove the inheritance from the array and instead of that I will create a "normal" class with the array as a public property.