A Typescript generic that creates a set of builder function interfaces

Question

A Typescript generic that creates a set of builder function interfaces

Consider a Typescript interface:

interface Product {
  url: URL;
  available: boolean;
  price: number;
}

We need to create a generic type that can produce a builder type based on any given interface:

interface ProductSteps {
  url: (data: unknown) => URL;
  available: (data: unknown) => boolean;
  price: (data: unknown) => number;
}

One approach is to utilize the Record utility type to generate the Builder:

type Steps<T> = Record<keyof T, (data: unknown) => T[keyof T]>
type ProductSteps = Steps<Product>;

Although this method works, it allows any of the value types of Product as return types:

type ProductSteps {
  url: (data: unknown) => URL | boolean | number;
  available: (data: unknown) => URL | boolean | number;
  price: (data: unknown) => URL | boolean | number;
}

Any suggestions on how to constrain the return type of the builder functions to their corresponding type in Product?

typescript interface mapped-types

Answer 1

Answer №1

To construct a mapped type, we need to define two generic values: an ObjectType such as Product, and a DataType which represents the data we are mapping. Each key of the object type ([P in keyof ObjectType]) corresponds to a function that takes the data and maps it to the value for that key in the object (

(data: DataType) => ObjectType[P]

).

type Steps<ObjectType, DataType> = {
  [P in keyof ObjectType]: (data: DataType) => ObjectType[P]
};

When we use this with a Product and a custom SomeDataInterface like so:

type Test = Steps<Product, SomeDataInterface>;

the result is:

type Test = {
    url: (data: SomeDataInterface) => URL;
    available: (data: SomeDataInterface) => boolean;
    price: (data: SomeDataInterface) => number;
}

Check out the Typescript Playground Link

Answer 2

To construct a mapped type, we need to define two generic values: an ObjectType such as Product, and a DataType which represents the data we are mapping. Each key of the object type ([P in keyof ObjectType]) corresponds to a function that takes the data and maps it to the value for that key in the object (

(data: DataType) => ObjectType[P]

).

type Steps<ObjectType, DataType> = {
  [P in keyof ObjectType]: (data: DataType) => ObjectType[P]
};

When we use this with a Product and a custom SomeDataInterface like so:

type Test = Steps<Product, SomeDataInterface>;

the result is:

type Test = {
    url: (data: SomeDataInterface) => URL;
    available: (data: SomeDataInterface) => boolean;
    price: (data: SomeDataInterface) => number;
}

Check out the Typescript Playground Link

A Typescript generic that creates a set of builder function interfaces

Answer №1

Similar questions

How can I dynamically generate multiple Reactive Forms from an array of names using ngFor in Angular?

Exclude specific fields when updating a document in Firebase using the update()

Incorporating Angular 11, Typescript, Node.js, and MySQL into the project, a feature is implemented where a button is displayed in the home component based on the Boolean value of 'mysql' only if

Angular is unable to start the variable_INITIALIZation process

What is the best way to create a props interface that includes state and setState values that are being

How can I retrieve the row index in an Angular Mat-Table that has expandable content?

What is the best way to iterate through an array and dynamically output the values?

Retrieving display format or formatted value from an object with Moment.js

Implementing debounce in Subject within rxjs/Angular2

What is the correct version compatibility matrix for Expo, NPM, Node, React Native, and TypeScript?

Error encountered when attempting to retrieve token from firebase for messaging

NextJS Typescript Player

The expiration of the Gitlab CI/CD cache leads to the failure of the build process

Creating a Utils class in Vue.js with seamless access to Vuex through this.$store

React error: The module "react-router-dom" does not have a member named "useNavigate" available for export

When trying to upload a file with ng-upload in Angular, the error 'TypeError: Cannot read properties of undefined (reading 'memes')' is encountered

Disable multiple buttons at once by clicking on them

Tips for handling user click events in Angular 2?

Ways to transfer information among Angular's services and components?

When submitting in an Angular mat-dialog, the page should refresh without closing the dialog