Guide to creating a generic type in Typescript that includes constraints to extend an iterable

Question

Guide to creating a generic type in Typescript that includes constraints to extend an iterable

I am currently working on writing a specific type of Pagination:

type Pagination<I extends Iterable> = Readonly<{
  seek: number;
  limit: number;
  total: number;
  items: I;
}>;

This allows users to utilize:

Pagination<Map<number, any>>

However, there seems to be an issue because Iterable also requires a generic parameter.

Therefore, I am now using:

type Pagination<I> = Readonly<{
  seek: number;
  limit: number;
  total: number;
  items: Iterable<I>;

}

While this solution works, the type signatures are limited to Pagination<number> without further constraints on the type of iterable to be used.

typescript typescript-generics

Answer 1

Answer №1

Instead of specifying the item type, you can utilize the generic parameter for the iterable itself using T extends Iterable<any>

type Pagination<I extends Iterable<any>> = Readonly<{
  seek: number;
  limit: number;
  total: number;
  items: I;
}>;

Note: If you do require the item type, a conditional type can be used to extract it:

type Pagination<I extends Iterable<any>> = Readonly<{
  seek: number;
  limit: number;
  total: number;
  items: I;
  current: I extends Iterable<infer Item> ? Item: never
}>;

declare let map: Pagination<Map<string, number>>
map.current // [string, number]

declare let arr: Pagination<string[]>
arr.current // string

Play

Answer 2

Instead of specifying the item type, you can utilize the generic parameter for the iterable itself using T extends Iterable<any>

type Pagination<I extends Iterable<any>> = Readonly<{
  seek: number;
  limit: number;
  total: number;
  items: I;
}>;

Note: If you do require the item type, a conditional type can be used to extract it:

type Pagination<I extends Iterable<any>> = Readonly<{
  seek: number;
  limit: number;
  total: number;
  items: I;
  current: I extends Iterable<infer Item> ? Item: never
}>;

declare let map: Pagination<Map<string, number>>
map.current // [string, number]

declare let arr: Pagination<string[]>
arr.current // string

Play

Guide to creating a generic type in Typescript that includes constraints to extend an iterable

Answer №1

Similar questions

Typescript method for handling empty JSON responses

Tips for transfering variables from an electron application to the backend of an Angular project

Issue: The code is throwing an error "TypeError: Cannot read property 'push' of undefined" in the JavaScript engine "Hermes

Angularjs 2 Error: Unable to access the 'infos' property of an undefined object using the Http Client

Struggling to modify a string within my React component when the state is updated

Creating callback functions that vary based on input variables

Tips on ensuring that the Google Maps marker remains in the center as you drag the map with the AGM component

What kind of Typescript type should be assigned to setState when passed to the component?

Manipulating CSS styles through Javascript with passed parameters

Typescript - ensure only one specific value is in an array of length N

Tips for utilizing chodorowicz / ts-debounce effectively

Mastering mapped types to replace properties in Typescript

What is the best way to incorporate the active class in the initial div utilizing *ngFor within Angular 7?

Changing function arguments in TypeScript using the spread operator

User's information will only be updated once the page is refreshed

After compiling the code, a mysterious TypeScript error pops up out of nowhere, despite no errors being

Issue with TypeScript: variable lacks an initializer and is not explicitly assigned within the constructor

Creating an object in JavaScript using an array type初始化数组类型为对象javascript

How can I verify the value of a class variable in TypeScript by using a method?

Having trouble uploading images using Ionic/Angular to a PHP script