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

Creating dynamic layouts using Handlebars.js recursion

Activating gzip compression using fetch.js

Is it possible for jQuery to create a popup window displaying a specific value?

Step-by-step guide to launching a new window or tab without automatically bringing it into focus

Making a POST request to a Next.js API route results in a 500 Internal Server Error being sent back

Error encountered when attempting to retrieve token from firebase for messaging

Filtering out specific properties from an element within a JavaScript forEach loop

Attempting to send numerous identifiers in an API request

Customize Bottom Navigation Bar in React Navigation based on User Roles

Obtain the specific key's value from a new Map state

Discover the HTML of a different website using Javascript

Dynamic Bootstrap Modal Widget

Are arrays being used in function parameters?

Updating the chosen option using jQuery

Issue: $injector:unpr Angular Provider Not Recognized

Using request-promise from npm, send a request with a self-generated certificate in JavaScript

Generating text upon clicking by utilizing vue apex charts dataPointIndex

Buttons within the Bootstrap carousel caption cannot be clicked

Node.js/TypeScript implementation of the Repository design pattern where the ID is automatically assigned by the database

AJAX response from open cart is returning null JSON data