How to Extend Array Object in Typescript

Jasser Mark Arioste

Jasser Mark Arioste

How to Extend Array Object in Typescript

Hello! In this tutorial, you'll learn how to extend the Array object and add more methods or properties that you can use when creating a new array instance.

How to Extend Array Object #

Below are the steps to extend the array object in Typescript:

  1. Create a type definition and implementation file such as array.extensions.ts.
  2. Use declaration merging and extend the Array interface
  3. Implement the actual method or property
  4. Export the file
  5. Import the file in index.ts

Step 1: Creating the Type Definition File #

Although this step is optional, I find that separating the type definitions when extending a global object like Array is just a best practice. You'll know where to look for what methods when checking for extensions for a particular object.

Now create the file array.extensions.ts somewhere in your project folder.

touch extensions/array.extensions.ts

Step 2: Use Declaration Merging #

Next, is to use declaration merging. Declaration merging is a useful feature in typescript where you can define multiple definitions of an Interface and the compiler will combine all definitions into one. You'll be able to use all methods and properties from all definitions.

In this example, we use global augmentation like so:

// extensions/array.extensions.ts
// declaration merging
declare global {
  interface Array<T> {
    split(index: number): T[][]; // adds a split() function to the array
export {}

Now, if you try to import this file to index.ts and use [].split() method, it will not throw a compile time error but running the code throws a runtime error since there's no implementation.

For example:

// index.ts
import "./array.extensions";

const result = [1, 2, 3].split(2); // TypeError: [1,2,3].split is not a function

Step 3: Implement the Actual Method #

To fix the error above, your next step is to implement the actual method. Modify your array.extensions.ts file like so:

// declaration merging
declare global {
  interface Array<T> {
    split(index: number): T[][];

if (!Array.prototype.split) {
  Array.prototype.split = function <T>(this: Array<T>, index: number) {
    // do the actual implementation here for example:
    const result = [this.slice(0, index), this.slice(index)];
    // return the new array
    return result;

export {};

Step 4: Export the file #

Next is to export the file so that it's treated as a module.

// array.extensions.ts

// ...omitted for brevity
export {};

Notice in line 4 that we included export {}. If you don't do this, the typescript compiler will throw the following error:

Augmentations for the global scope can only be directly nested in external modules or ambient module declarations.

Step 5: Import the file in index.ts #

Next is to import the file in index.ts, by importing it in the most top-level file, you'll be sure that the array extensions can still be used in the files below.

// index.ts
import "./array.extensions";

const result = [1, 2, 3].split(2);
console.log(result); // [ [ 1, 2 ], [ 3 ] ]

That's basically it!

Conclusion #

You learned how to extend the Array object in Typescript step-by-step. This method can also be used to extend other top-level objects such as Object, Number, String.

If you like this tutorial, please leave a like or share this article. For future tutorials like this, please subscribe to our newsletter or follow me on GitHub.

Resources #

Credits: Image by Kanenori from Pixabay

Share this post!

Related Posts


This content may contain links to products, software and services. Please assume all such links are affiliate links which may result in my earning commissions and fees.
As an Amazon Associate, I earn from qualifying purchases. This means that whenever you buy a product on Amazon from a link on our site, we receive a small percentage of its price at no extra cost to you. This helps us continue to provide valuable content and reviews to you. Thank you for your support!
Donate to ReactHustle