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

Achieving top-tier efficiency in segmenting items within an array of objects

Using TypeORM with a timestamp type column set to default null can lead to an endless loop of migrations being

Middleware for Redux in Typescript

Ensure the Json object contains an integer

Updating directives is required when there is a modification in the input

Wrapper around union function in TypeScript with generics

How does one distinguish between the uses of "any" and "any[ ]"?

Utilize the <wbr> tag within FormattedMessage and assign it as a value while coding with TypeScript

Error encountered during Jasmine unit testing for the ng-redux @select directive

Sharing API data between components in Angular 5

Sending an event from a child component to another using parent component in Angular

What are some ways to make autorun compatible with runInAction in mobx?

Is it feasible to use a component in a recursively manner?

Unable to create a loop within the constructor to assign API values

Wondering how to implement HubSpot Conversations SDK in a Typescript/Angular application?

Retrieving JSON array data in Android via a URL getPath

Update the value in a nested object array by cross-referencing it with a second nested object array and inserting the object into the specified

How can I save a TypeScript object to Firebase using serialization?

React Typescript Context state isn't refreshing properly

Identifying the absence of a character at the end of the last line in Node.js to detect