Extending Array from TypeScript

Question

What Am I doing wrong in my below code?

I am trying to extend Array on my class MyNumberList and then trying to use it. What I see is that no items seem to be getting added to the list. I get an undefined when I attempt to access the list elements.

P.S I am using TypeScript 1.8.2

class MyNumberList extends Array<number> {

  constructor(...numbers: number[]) {
    // looks like this is not working
    super(...numbers);
  }
}

let statusCodes: MyNumberList = new MyNumberList(10, 20, 30);

console.log(statusCodes[0]);       // printing undefined
console.log(statusCodes.length);   // printing 0

T.J. Crowder · Accepted Answer · 2016-02-27 17:48:27Z

8

Arrays cannot be extended in ES5, so the code that the TypeScript compiler produces doesn't work correctly. The code it produces for your constructor is this:

function MyNumberList() {
    var numbers = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        numbers[_i - 0] = arguments[_i];
    }
    _super.apply(this, numbers);
}

...where _super is Array. In the normal course of things, _super.apply(this, numbers) would work just fine, but the Array function behaves differently when it's called as a function than when it's called as a constructor. Babel and other ES2015 (ES6) to ES5 transpilers have the same problem. To properly inherit from an array requires features within the JavaScript engine that just are not present in ES5 engines.

If you change your constructor code to:

constructor(...numbers: number[]) {
  super();
  this.push(...numbers);
}

...it will populate your instance correctly. I can't guarantee how well other features of Array will work, though.

answered Feb 27, 2016 at 17:48

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

codematix Over a year ago

Hmm that is interesting. What you say makes sense.I was attempting to make a first-class collection where I would augment the functionality inherited from Array with some domain-specific operations. Its sad that it won't work with regular syntax.

codematix Over a year ago

Thanks for your help @t-j-crowder. Your alternative on calling this.push(...numbers) seems to be working. I however may need deeper tinkering to find out what else breaks. TIL, when using TypeScript, its a good idea to look at & understand the transpiled JavaScript code.

Collectives™ on Stack Overflow

Extending Array from TypeScript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related