I have created a React hook:
interface Person {
name: string
age: number
}
export const usePerson = function <T extends Person, K extends keyof T>(): (property: K, setter: (value: T[K]) => T[K]) => void {
const setPersonProperty = (property: K, setter: (value: T[K]) => T[K]): void => {
console.log(property, setter)
}
setPersonProperty('name', (x) => x)
return setPersonProperty;
}
I have seen the pattern <T, K extends keyof T>
from typescript docs but I am unable to use it correctly in my example.
More specifically, the typescript complains on the line
setPersonProperty('name', (x) => x)
Although when I start typing setPersonProperty('n /* IDE autocompletes name */
but complains for the 'name'
parameter and I get the following error:
Argument of type 'string' is not assignable to parameter of type 'K'. 'string' is assignable to the constraint of type 'K', but 'K' could be instantiated with a different subtype of constraint 'string | number | symbol'.
I have also posted an image from my IDE. I am using typescript 4+.
What am I doing wrong here ?