0

For reference, I am using React 16.9.0 and Typescript 3.5.3.

On this question How to extend an existing JavaScript array with another array, without creating a new array, I found how to create the new method extend on the Array type:

Array.prototype.extend = function (other_array) {
    /* You should include a test to check whether other_array really is an array */
    other_array.forEach(function(v) {this.push(v)}, this);
}

But when I try to add Typescript support (for type checking the array type), I cannot find how to make it work. This is how I tried:

interface ExtendedArray< Type > extends Array< Type > {
  extend: () => void;
}

if( !( 'extend' in Array.prototype ) ) {
  Array.prototype.extend = function (other_array: ExtendedArray< any >) {
      other_array.forEach( function(element) { this.push( element ) }, this );
  }
}

Typescript just keep insisting my ExtendedArray type does not have the prototype.extend attribute:

Property 'extend' does not exist on type 'any[]'.  TS2339

    52 | if( !( 'extend' in Array.prototype ) ) {
  > 53 |   Array.prototype.extend = function (other_array: ExtendedArray< any >) {
       |                   ^
    54 |       other_array.forEach( function(element) { this.push( element ) }, this );
    55 |   }
    56 | }

After searching more, I fond this other question Extending functionality in TypeScript, with this example:

interface String {
    foo(): number;
}

String.prototype.foo= function() {
    return 0;
}

But if I try to run it, Typescript just strikes its rage:

Property 'foo' does not exist on type 'String'.  TS2339

    41 | }
    42 | 
  > 43 | String.prototype.foo= function() {
       |                  ^
    44 |     return 0;
    45 | }
    46 |

How can I extend a Javascript builtin the prototype with a new function on Typescript?

Evandro Coan
  • 8,560
  • 11
  • 83
  • 144
  • Your `.extend()` function in the first sample of code is wrong; the value of `this` in the callback won't be what it needs to be. – Pointy Sep 18 '19 at 17:00
  • Although it could be a contrived example to illustrate the prototype extension, I'm not sure I understand the point of `extend` when `push` already does that. Can we not do: `arr.push(...arrToAdd)`? – ggorlen Sep 18 '19 at 17:07
  • **@ggorlen, Can we not do: arr.push(...arrToAdd)?** It will not work for large arrays as 1.000.0000 elements. This is explained here: https://stackoverflow.com/a/17368101/4934640 – Evandro Coan Sep 18 '19 at 17:13
  • Ah, OK--good to know, thanks. If you're really pushing hundreds of thousands of entries at once then I'd be worried the performance of the `forEach` version. `for ... of` might be faster. – ggorlen Sep 18 '19 at 17:19
  • You need to define the interface in a .d.ts file and reference that, take a look at declaration merging https://www.typescriptlang.org/docs/handbook/declaration-merging.html – alou Sep 18 '19 at 17:33

0 Answers0