Accessing properties in TypeScript using an index that is determined by another property within the same interface

Question

Accessing properties in TypeScript using an index that is determined by another property within the same interface

Allow me to illustrate my query with an example rather than simply using words:

interface Y {
    x: number,
    y: string
}

interface PairValue<T> {
    key: keyof T,
    value: T[this['key']]
}

const pairValue: PairValue<Y> = {
    key: 'x',
    value: 'Issue! This should be a number'
};

My objective is to have the type of value determined by the value of key. In other words, if key is x, then I want the type of value to match the type of Y[x], which is number. However, at present, the type of value is string | number, resulting from the union of all value types in Y.

Is it possible to accomplish this using the current features available in TypeScript?

typescript typescript-typings

Answer 1

Answer №1

You cannot achieve this directly, as an additional type parameter is required.

interface Y {
    a: number,
    b: string
}

interface KeyValue<T, K extends keyof T> {
    key: K,
    value: T[this['key']] // or T[K]
}

const keyValue: KeyValue<Y, 'a'> = {
    key: 'a',
    value: 0
};

To streamline the process and avoid redundant typing of the property name, a function can be utilized for assistance. A fi function is needed that returns a function, since Typescript currently does not support partial type argument inference

function newX<T>() {
    return function <K extends keyof T>(p: Y<T, K>) {
        return p;
    }
}

let xy = newX<Y>()({ key: 'a', value:0})

Answer 2

You cannot achieve this directly, as an additional type parameter is required.

interface Y {
    a: number,
    b: string
}

interface KeyValue<T, K extends keyof T> {
    key: K,
    value: T[this['key']] // or T[K]
}

const keyValue: KeyValue<Y, 'a'> = {
    key: 'a',
    value: 0
};

To streamline the process and avoid redundant typing of the property name, a function can be utilized for assistance. A fi function is needed that returns a function, since Typescript currently does not support partial type argument inference

function newX<T>() {
    return function <K extends keyof T>(p: Y<T, K>) {
        return p;
    }
}

let xy = newX<Y>()({ key: 'a', value:0})

Accessing properties in TypeScript using an index that is determined by another property within the same interface

Answer №1

Similar questions

tips for closing mat select when clicked outside

Exploring TypeScript and React: Redefining Type Definitions for Libraries

Updating an array by adding or removing items

Ways to utilize the useRef method within the useContext hook while implementing Typescript

Issue with Angular Material: Default selection not being applied in mat-select component

Utilizing objects as values with `react-hook-form`

Encountering an error when trying to set data in a Firestore document with a customized JavaScript object: "Invalid data provided for function DocumentReference.set()"

The TypeScript error "File 'XXX' is not recognized as a module" is preventing successful compilation

How can TypeScript leverage the power of JavaScript libraries?

Checkbox selections persist when navigating between pages

Attempting to utilize a default import to invoke an expression that does not have a call signature is not

Issue with Typescript npm script including compilation and nodemon issue

Tips for programmatically focusing on a v-textarea using Vuetify and TypeScript

Encountering a Typescript issue with the updated Apollo server version within a NestJS application

Unable to send JSON data from server to client following a successful file upload operation

What is the process for obtaining the result of an asynchronous function triggered by an event in HTML?

Tips for effectively utilizing react-test-renderer/shallow in a TypeScript environment

Implement dynamic routerLink binding with Angular 11

What are the TypeScript type definitions for the "package.json" configuration file?

Using Angular BehaviorSubject in different routed components always results in null values when accessing with .getValue or .subscribe