How to extend Array.prototype in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 2, 2022

banner

Check out my new book

Extend Array.prototype in TypeScript #

To extend Array.prototype in TypeScript:

  1. Create a .d.ts file and add an interface that extends Array.
  2. Add types for the methods you intend to use on array objects.
  3. Add the methods on the Array.prototype.

In the src directory of your project, create a types directory containing the following index.d.ts file.

src/types/index.d.ts
export {}; declare global { interface Array<T> { removeLast(): T[]; } }

The example above shows how to extend the Array interface with a method named removeLast() that returns an array containing elements of the same type.

Note that this will be different in your use case, so make sure to adjust the method names and types.

Now in your index.ts file, add the method to the Array.prototype.

index.ts
const arr = ['a', 'b', 'c', 'd']; if (!Array.prototype.removeLast) { Array.prototype.removeLast = function () { this.pop(); return this; }; } // 👇️ const result: string[] const result = arr.removeLast(); console.log(arr); // 👉️ ['a', 'b', 'c']

We added the removeLast method to the Array.prototype and used it.

Note that you have to add the method to the Array.prototype in a file that runs before all other files, e.g. an index.ts file.

If you try to use the method before it was added to the prototype you'd get an error.

If you are getting an error in your IDE, try adding the path to your types directory to your tsconfig.json file.

tsconfig.json
{ "compilerOptions": { // ... rest "typeRoots": ["./node_modules/@types", "./src/types"] } }

We used the export {} line in our index.d.ts file to mark it as an external module. A module is a file that contains at least 1 import or export statement. We are required to do that to be able to augment the global scope.

Note that you will have to change the contents of the provided index.d.ts file according to your use case.

You should add the names (and types) of all of the methods you intend to access on arrays.

src/types/index.d.ts
export {}; declare global { interface Array<T> { removeLast(): T[]; } }

The provided file simply adds a removeLast method with a return type of T[], which is most likely not what you need.

We used a generic in the method type. Generics are like variables, but for types.

This allows us to get a better typing for the return type of the method. We are basically telling TypeScript that the removeLast method takes no parameters and returns an array containing elements of the same type.

TypeScript looks for .d.ts files in the same places it looks for your regular .ts files, which is determined by the include and exclude settings in your tsconfig.json file.

TypeScript will merge the declared from you Array interface with the original Array interface, so when you use the arrays, you will be able to access methods and properties from both interfaces.

Use the search field on my Home Page to filter through my more than 3,000 articles.