Best practices for extending the Array<T> in typescript

Question

Best practices for extending the Array<T> in typescript

In a discussion on extending the Static String Class in Typescript, I came across an example showing how we can extend existing base classes in typescript by adding new methods.

interface StringConstructor {
   isNullOrEmpty(str:string):boolean;
}
String.isNullOrEmpty = (str:string) => !str;

This example worked perfectly for me. However, when it came to creating a generic interface and adding a new method like 'contain()' to an Array, I faced some challenges. Here's what I tried:

//1
interface Array<T> {
    contain(item: T): boolean;
}  
//2
?????? = (item: T) => {
// ....
    return true;
};

After adding the first step, I saw 'contain' method appearing in VS intellisense, but I couldn't figure out where to actually implement this method. Any suggestions?

typescript

Answer 1

Answer №1

When working with the interface definition already linked to the generic constraint, the implementation allows you to treat it as any type:

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

Array.prototype.contain = function(item) {
    return this.some(obj => item == obj);
};

It's important not to use arrow functions for prototype methods, which can lead to unexpected results:

interface Array<T> {
    fn(): void;
}

Array.prototype.fn = () => {
    console.log(this);
};

let a = [];
a.fn(); // Window

Instead, use regular functions like this:

Array.prototype.fn = function() {
    console.log(this);
};

let a = [];
a.fn(); // []

If your target is es5 or lower, the compiler will translate arrow functions into regular ones. However, if you switch to targeting es6 without changing arrow functions in your code, it may break and be difficult to troubleshoot.

Answer 2

When working with the interface definition already linked to the generic constraint, the implementation allows you to treat it as any type:

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

Array.prototype.contain = function(item) {
    return this.some(obj => item == obj);
};

It's important not to use arrow functions for prototype methods, which can lead to unexpected results:

interface Array<T> {
    fn(): void;
}

Array.prototype.fn = () => {
    console.log(this);
};

let a = [];
a.fn(); // Window

Instead, use regular functions like this:

Array.prototype.fn = function() {
    console.log(this);
};

let a = [];
a.fn(); // []

If your target is es5 or lower, the compiler will translate arrow functions into regular ones. However, if you switch to targeting es6 without changing arrow functions in your code, it may break and be difficult to troubleshoot.

Best practices for extending the Array<T> in typescript

Answer №1

Similar questions

The incredible power of the MongoDB $inc field

Crafting a model for arrays of objects - a guide to perfection

Tips for obtaining a subset of `keyof T` where the value, T[K], refers to callable functions in Typescript

The text inside the Mapbox GL popup cannot be highlighted or copied

What is preventing me from setting the User object to null in my Angular application?

A TypeScript method for accessing deeply nested properties within an object

There is no such property - Axios and TypeScript

Utilizing TypeScript in Kendo UI for JQuery

Utilizing Angular 4 to dynamically render a template stored in a string variable

What is the reason behind eslint not permitting the rule option @typescript-eslint/consistent-type-imports?

There was an unhandled exception that occurred due to a missing file or directory with the lstat error on 'D:a1s ode_modulesquill'

Converting Typescript fat arrow syntax to regular Javascript syntax

What could be causing the API link to not update properly when using Angular binding within the ngOnInit method?

Angular: How can the dropdown arrow in 'ng-select' be eliminated?

implementing dynamic visibility with ngIf directive in Angular

Seems like ngAfterViewInit isn't functioning properly, could it be an error on my end

Guide on retrieving the interface property name or key name as a string in Typescript

Navigating through Array Elements with ngFor and the Next Button

The function is failing to return the expected value received from the observable subscription

Is there a way to assess Python code within a document's context using JavaScript in JupyterLab?