Employing TypeScript to utilize dynamic keys on objects

Question

Employing TypeScript to utilize dynamic keys on objects

I am working with a function that looks like this

interface Cat {
    color: string,
    weight: number,
    cute: Boolean, // even though all cats are cute!
}

export const doSomething = (
    cat: Array<Cat| null>,
    index: number,
    key:  keyof typeof cat,
    payload: string | number | Boolean
) => {
    ....
    cat[key] = payload
    ....
}

As a result, I get the error message:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

This occurs because TypeScript is interpreting key as any string instead of one of

"color", "weight", "cute"

. How can I specify in the function declaration that key should be one of these three values?

I attempted to use

...
key:  keyof Cat,
...

but it did not work. Now, when I try to assign the value using

 cat[key] = payload

I receive the following error:

Type 'string| number | Boolean | ' is not assignable to type '(string & number & Boolean )

typescript

Answer 1

Answer №1

cat is actually an array, so when you use keyof typeof cat, you're getting the keys of the array and not from the Cat interface. To access keys from the Cat interface, you should specifically use keyof Cat.

export const doSomething = (
    cat: Array<Cat | null>,
    index: number,
    key: keyof Cat,
    payload: string | number | Boolean
) => {
    cat.forEach(c => {
        if (c) {
            c[key] = payload
        }
    });
}

However, this function still doesn't work perfectly because there's no connection between the key and the payload. For instance, you could call doSomething(.., ..., 'cute', 1).

In order to link the payload with the key, you need to add a generic type parameter:

export const doSomething = <K extends keyof Cat>(
    cat: Array<Cat | null>,
    index: number,
    key: K,
    payload: Cat[K]
) => {
    let c = cat[index];
    if (c) {
        c[key] = payload
    }
}

Playground Link

The usage of K as a generic type parameter in the code above enables capturing additional information from the call site, turning it into a generic function. In this context, K extends keyof Cat specifies that K must be a subtype of keyof Cat, meaning it can only be one of "color", "weight", or "cute".

When you invoke

doSomething([], 0, "cute", true)

, K will represent "cute". Armed with this information about the called function, you can utilize it within a type query (Cat[K]) to acquire the actual type of the property linked to the key "cute".

Answer 2

cat is actually an array, so when you use keyof typeof cat, you're getting the keys of the array and not from the Cat interface. To access keys from the Cat interface, you should specifically use keyof Cat.

export const doSomething = (
    cat: Array<Cat | null>,
    index: number,
    key: keyof Cat,
    payload: string | number | Boolean
) => {
    cat.forEach(c => {
        if (c) {
            c[key] = payload
        }
    });
}

However, this function still doesn't work perfectly because there's no connection between the key and the payload. For instance, you could call doSomething(.., ..., 'cute', 1).

In order to link the payload with the key, you need to add a generic type parameter:

export const doSomething = <K extends keyof Cat>(
    cat: Array<Cat | null>,
    index: number,
    key: K,
    payload: Cat[K]
) => {
    let c = cat[index];
    if (c) {
        c[key] = payload
    }
}

Playground Link

The usage of K as a generic type parameter in the code above enables capturing additional information from the call site, turning it into a generic function. In this context, K extends keyof Cat specifies that K must be a subtype of keyof Cat, meaning it can only be one of "color", "weight", or "cute".

When you invoke

doSomething([], 0, "cute", true)

, K will represent "cute". Armed with this information about the called function, you can utilize it within a type query (Cat[K]) to acquire the actual type of the property linked to the key "cute".

Employing TypeScript to utilize dynamic keys on objects

Answer №1

Similar questions

Connecting data with Angular

The limitations of Typescript when using redux connect

What could be causing the node inspector to fail to launch when using nodemon and ts-node together?

I'm struggling to find the right Typescript syntax for defining a thunk function that returns a value while using React Redux Toolkit

Password validations are a key feature of reactive forms

Tutorials on transferring selected option data to a component

Unable to store the output of an asynchronous function in an object

Can you explain the purpose of the MomentInput type in ReactJS when using TypeScript?

I seem to be invisible to the toggle switch

conditional operator that compares values in router events

Angular Service singleton constructor being invoked multiple times

The html-duration-picker is not being displayed in the proper format

React modal not closing when clicking outside the modal in Bootstrap

FireStore mock for Angular service testing that can be reused by Jasmine

How can I delay the loading of a lazy loaded module in Angular until certain data is resolved from an API call?

React 18 update causes malfunctioning of react-switch-selector component

Utilizing conditional binding with ngModel in Angular 5

Encountered a bun runtime error stating "Possibly require an `extends React.JSX.IntrinsicAttributes` constraint for this type parameter."

Techniques for invoking the parent function from a child button

Angular is able to successfully retrieve the current route when it is defined, but