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:

Create a type definition and implementation file such as array.extensions.ts.
Use declaration merging and extend the Array interface
Implement the actual method or property
Export the file
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 {}12345678

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
console.log(result);
12345

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 {};
1234567891011121314151617

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 {};
1234

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.1

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 ] ]
12345

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 #

Declaration Merging In Typescript

Credits: Image by Kanenori from Pixabay

ReactHustle

How to Extend Array Object in Typescript