Expanding Arrays in TypeScript for a particular type

Question

Expanding Arrays in TypeScript for a particular type

There is a method to extend arrays for any type:

declare global {
  interface Array<T> {
    remove(elem: T): Array<T>;
  }
}

if (!Array.prototype.remove) {
  Array.prototype.remove = function<T>(this: T[], elem: T): T[] {
    return this.filter(e => e !== elem);
  }
}

Source: Extending Array in TypeScript

But now the question arises, is it possible to extend the array only for a specific type?. For example, only for arrays of type User -> Array<User>.

I aim to introduce an extension method, like .toUsersMap(), which will only be accessible for arrays containing items of type User.

arrays typescript types

Answer 1

Answer №1

You can replicate similar functionality:

type Person = {
  tag: 'Person'
}

interface Array<T> {
  toPeopleMap: T extends Person ? (elem: T) => Array<T> : never
}

declare var person: Person;

const personsArr = [person]

personsArr.toPeopleMap(person) // valid

const someOtherArray = [{ notPerson: true }]

someOtherArray.toPeopleMap() // Cannot call this expression

If the T parameter does not extend the Person type, TypeScript will prevent using the toPeopleMap method.

Try it out here

Answer 2

You can replicate similar functionality:

type Person = {
  tag: 'Person'
}

interface Array<T> {
  toPeopleMap: T extends Person ? (elem: T) => Array<T> : never
}

declare var person: Person;

const personsArr = [person]

personsArr.toPeopleMap(person) // valid

const someOtherArray = [{ notPerson: true }]

someOtherArray.toPeopleMap() // Cannot call this expression

If the T parameter does not extend the Person type, TypeScript will prevent using the toPeopleMap method.

Try it out here

Answer 3

Answer №2

Suppressing the IntelliSense prompting for toUsersMap() on Arrays may not be feasible, but you can enforce a compiler error when calling arr.toUsersMap() unless arr is of type Array<User>. One method to achieve this is by incorporating a this parameter in the toUsersMap() method:

interface Array<T> {
  toUsersMap(this: Array<User>): Map<string, User>;
}

Now, the compiler will mandate that toUsersMap() can only be invoked with a this context referring to something assignable to Array<User>:

interface User {
  username: string;
}
const arr = [{ username: "foo" }, { username: "bar" }];
arr.toUsersMap() // No error, works fine

const another_array = ["hello", 123];
another_array.toUsersMap() // Error occurs
//~~~~~~~~~~~ <--
// The 'this' context of type '{ notUser: boolean; }[]' is 
// not compatible with the method's 'this' of type 'User[]'

Link to Playground with code

Answer 4

Suppressing the IntelliSense prompting for toUsersMap() on Arrays may not be feasible, but you can enforce a compiler error when calling arr.toUsersMap() unless arr is of type Array<User>. One method to achieve this is by incorporating a this parameter in the toUsersMap() method:

interface Array<T> {
  toUsersMap(this: Array<User>): Map<string, User>;
}

Now, the compiler will mandate that toUsersMap() can only be invoked with a this context referring to something assignable to Array<User>:

interface User {
  username: string;
}
const arr = [{ username: "foo" }, { username: "bar" }];
arr.toUsersMap() // No error, works fine

const another_array = ["hello", 123];
another_array.toUsersMap() // Error occurs
//~~~~~~~~~~~ <--
// The 'this' context of type '{ notUser: boolean; }[]' is 
// not compatible with the method's 'this' of type 'User[]'

Link to Playground with code

Expanding Arrays in TypeScript for a particular type

Answer №1

Answer №2

Similar questions

How to assign keys and values to array elements in PHP

What is the best way to retrieve all SVG objects within a specific area in an Angular application?

Is it possible to combine TypeScript modules into a single JavaScript file?

Implement Google Apps Script Array in HTML form for autocompleting datalist suggestions

Typescript: Streamline the process of assigning types to enum-like objects

MongoDB NextJS connection issue "tried to retrieve a connection from a closed connection pool"

The error code TS2474 (TS) indicates that in 'const' enum declarations, the member initializer must be a constant expression

Exploring Typescript: Combining types (rather than intersecting them)

Swap out the default URL in components with the global constant

Typescript libraries built specifically for unique custom classes

How can I integrate keydown.control with a unique click function in Angular?

Mastering the Art of Utilizing Generic Typing to Access Objects

Is there an issue with this return statement?

Is it possible for me to convert a .map array into a comma-separated array enclosed in double quotation marks?

What is the best way to disable a collapsed section in VS Code using comments?

What could be causing an error with NextJS's getStaticPaths when running next build?

The package import path varies between dynamic code generation and static code generation

Learn the process of seamlessly uploading various document formats, videos, and previewing documents with Angular software

What steps can I take to persistently subscribe to SignalR from an Angular service even in the event of connection failures?

Troubleshooting Problems with Wordpress Shortcode Arrays