How to inform TypeScript compiler of extensions to JS Array prototype?

Question

I have created a polyfill for the JavaScript Array;

if (Array.prototype.remove !== 'function') {
    Array.prototype.remove = function (value) {
        var idx = this.indexOf(value);
        if (idx !== -1) {
            return this.splice(idx, 1);
        }
        return false;
    };
}

Now I am upgrading the original JavaScript project to a TypeScript project and the tsc complains about the usage of the .remove method:

class Archive {
   documents: DocInfo[] = [];  // <-- Array of class DocInfo

   addDocument(document: DocInfo) {
      ...
   }

   deleteDocument(document: DocInfo) {
      this.documents.remove(document);
                     ^^^^^^
                     tsc complains here: TS2339:Property 'remove' does not exist on type 'DocInfo[]'
   }
}

How can I tell the tsc about this extension?

I tried creating a typings file, but without any success:

declare module 'Array' {
    export function removeByAttr(propertyName: string, propertyValue: any);
}

Thanks

The remove method needs to be part of an "Array" of DocType. Not on DocType itself! — mvermand
– mvermand, Commented Nov 17, 2016 at 9:01
Moving it to Array.prototype will make it available for any type of array. — Rajesh Dixit
– Rajesh Dixit, Commented Nov 17, 2016 at 9:02
@Rajesh I already created the polyfill on Array.prototype, but that is in plain javascript. The tsc does not know about this. — mvermand
– mvermand, Commented Nov 17, 2016 at 9:11

Aleksey L. · Accepted Answer · 2016-11-17 09:06:26Z

1

The typings should extend Array<T> interface:

interface Array<T> {
    remove(item: T): boolean;
}

answered Nov 17, 2016 at 9:06

Aleksey L.

38.4k11 gold badges86 silver badges90 bronze badges

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

5 Comments

mvermand Over a year ago

Adding this code in a .d.ts file in my /typings folder did the trick!

Rajesh Dixit Over a year ago

Note, please suggest to use less generic name. This can have issues and might override original Array.remove function.

Aleksey L. Over a year ago

@Rajesh, Array has no remove function. And anyway the question is how to add typings.

Rajesh Dixit Over a year ago

Adding generic names in prototype is considered as bad practice because if its added in future, your code will override it. Also I just asked you to add this caveat

OwnageIsMagic Over a year ago

@AlekseyL. It will use native code, but overridden typing. that's a problem

invernomuto · Accepted Answer · 2016-11-17 09:19:25Z

1

Extending the Array class with an interface it's simple, you could try something like this:

Playground

    interface Array<T> {
   remove(o: T): Array<T>;
}

Array.prototype.remove = function (o) {

    var idx = this.indexOf(o);
        if (idx !== -1) {
            return this.splice(idx, 1);
        }
    return this;
}

class DocInfo { 
    name: string ;
    constructor(name) { 
        this.name = name;
    }
}

class Archive {
   documents: DocInfo[] = []; 
   addDocument(document: DocInfo) {
       this.documents.push(document);
   }
   deleteDocument(document: DocInfo) {
      this.documents.remove(document);
   }
   printDocuments() { 
       this.documents.forEach((item: DocInfo) => { 
           console.log(item.name);
       });

   }
}

const a = new Archive();
const _1 = new DocInfo('1');
const _2 = new DocInfo('2');

a.addDocument(_1);
a.addDocument(_2);
a.printDocuments();
a.deleteDocument(_1);
console.log('*********************');
a.printDocuments();
console.log('*********************');
a.addDocument(_1);
a.deleteDocument(_2);
a.printDocuments();

edited Nov 17, 2016 at 9:19

answered Nov 17, 2016 at 9:07

invernomuto

10.3k5 gold badges43 silver badges54 bronze badges

2 Comments

Gillardo Over a year ago

is there a way to make an array extension for only arrays that contain particular classes? ie. MyClass[] ?

invernomuto Over a year ago

@Gillardo sure with constraint, take a look at typescriptlang.org/docs/handbook/generics.html Using Type Parameters in Generic Constraints

Collectives™ on Stack Overflow

How to inform TypeScript compiler of extensions to JS Array prototype?

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related