How to retrieve the type of a computed keyof T as a generic type within TypeScript

Question

How to retrieve the type of a computed keyof T as a generic type within TypeScript

I am working with two different interfaces:

interface PersonRequirements{
    user:string,
    password:string,
    id:number
}
export interface Requirement<R> {
    name: keyof R & string,
    save: () => any,/* I want this return type to be same as return type of founded key in R*/
}

Here is an example of how I am using them:

const idRequirement:Requirement<PersonRequirements>={
    name:"id",
    save:function ():number/* I want this return type to be same as id's return type(number) but in a generic type safe way*/{
        //
    }
}

I am looking for a way to ensure that the save() method returns the same data type as the 'id' property, while maintaining type safety. How can I achieve this?

javascript typescript generics

Answer 1

Answer №1

To enforce the property name at compile time, you can introduce another generic parameter.

export interface Rule<R, N extends keyof R & string> {
    key: N; // ensures that the key matches the provided property name
    apply(): R[N];
}

Here's an example of how you can use it:

const ageRule: Rule<PersonRules, "age"> ={
    key: "age",
    apply: () => 18
}

Answer 2

To enforce the property name at compile time, you can introduce another generic parameter.

export interface Rule<R, N extends keyof R & string> {
    key: N; // ensures that the key matches the provided property name
    apply(): R[N];
}

Here's an example of how you can use it:

const ageRule: Rule<PersonRules, "age"> ={
    key: "age",
    apply: () => 18
}

How to retrieve the type of a computed keyof T as a generic type within TypeScript

Answer №1

Similar questions

Stylish hover effects displayed on disabled button using Styled Components

What is the best way to choose the checked items and calculate the total price by adding up all the prices of the selected items?

Set up counters for a variety of Owl Carousel sliders

Is there a way to adjust the dimensions of Google charts within a Bootstrap tab for a more customized appearance?

Guide on activating an event when a slider image is updated using jquery

The issue of JQuery recursion not properly focusing on a textbox

The functionality of the webservice is not functioning properly

Managing HTTP requests with errors within a forEach loop in Angular 9

Determine if the value is present in every element of the array and return true

KineticJS: Applying a filter to an image does not result in the image having a stroke

How can you show a green check mark next to an input field in AngularJS after inputting valid data?

Dragging elements using the jQuery UI Draggable feature onto a designated droppable area

The ability to retrieve variables within a certain scope from a function that is declared externally

Function generation using TypeScript

Menu Options in Material UI Navbar

What is the method for retrieving a property from an object contained within an array that is assigned to a property of another object?

Avoiding the opening of a select menu

Omit an enum item from selection when referencing the key within the Enum

ESLint detects the error "screen not found in @testing-library/vue"

I designed my higher-order component to allow for dual invocations. How can I integrate Redux within this framework?