I got an object with specific key/value parameters and I want to iterate over it with entries() method of Object followed by a forEach() method of Array. However I do not understand how I have to type this configuration to avoiding a typescript error:
type objType = {
prop1: number | undefined;
prop2: number | undefined;
prop3: number | undefined;
};
const obj: objType = {
prop1: 2,
prop2: 0,
prop3: undefined,
};
//1st attempt
Object.entries(obj).forEach(([key, value]) => {
if (value === undefined || value < 5) obj[key] = 5;
});
//2nd attempt
Object.entries(obj).forEach(
([key, value]: [keyof objType, number | undefined]) => {
if (value === undefined || value < 5) obj[key] = 5;
}
);
In first attempt, I let typescript infer the type of key (→ string) and value (→ number|undefined). But in this case I got an error when doing obj[key] :
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'objType'. No index signature with a parameter of type 'string' was found on type 'objType'.
In second attempt I forced the type of key to correspond to the key of obj using keyof operator, but this type definition is not allowed and I got the following message :
Argument of type '([key, value]: [keyof objType, number | undefined]) => void' is not assignable to parameter of type '(value: [string, number | undefined], index: number, array: [string, number | undefined][]) => void'. Types of parameters '__0' and 'value' are inpatible. Type '[string, number | undefined]' is not assignable to type '[keyof objType, number | undefined]'. Type at position 0 in source is not patible with type at position 0 in target. Type 'string' is not assignable to type 'keyof objType'.
I understand the failure for first attempt but not for the second. Why TS believes that I want to assign string to the string enumeration, I'm guessing to do the opposite...?
How is the correct way to type this configuration ?
I got an object with specific key/value parameters and I want to iterate over it with entries() method of Object followed by a forEach() method of Array. However I do not understand how I have to type this configuration to avoiding a typescript error:
type objType = {
prop1: number | undefined;
prop2: number | undefined;
prop3: number | undefined;
};
const obj: objType = {
prop1: 2,
prop2: 0,
prop3: undefined,
};
//1st attempt
Object.entries(obj).forEach(([key, value]) => {
if (value === undefined || value < 5) obj[key] = 5;
});
//2nd attempt
Object.entries(obj).forEach(
([key, value]: [keyof objType, number | undefined]) => {
if (value === undefined || value < 5) obj[key] = 5;
}
);
In first attempt, I let typescript infer the type of key (→ string) and value (→ number|undefined). But in this case I got an error when doing obj[key] :
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'objType'. No index signature with a parameter of type 'string' was found on type 'objType'.
In second attempt I forced the type of key to correspond to the key of obj using keyof operator, but this type definition is not allowed and I got the following message :
Argument of type '([key, value]: [keyof objType, number | undefined]) => void' is not assignable to parameter of type '(value: [string, number | undefined], index: number, array: [string, number | undefined][]) => void'. Types of parameters '__0' and 'value' are inpatible. Type '[string, number | undefined]' is not assignable to type '[keyof objType, number | undefined]'. Type at position 0 in source is not patible with type at position 0 in target. Type 'string' is not assignable to type 'keyof objType'.
I understand the failure for first attempt but not for the second. Why TS believes that I want to assign string to the string enumeration, I'm guessing to do the opposite...?
How is the correct way to type this configuration ?
Share Improve this question asked Dec 20, 2021 at 10:14 Sebastien DSebastien D 831 gold badge1 silver badge8 bronze badges2 Answers
Reset to default 7Why
First of all we need to understand why this happening: Let's check the simplest example:
const obj = {a: 1};
Object.keys(obj).forEach((key:keyof typeof obj)=> ''); // fails because Type 'string' is not assignable to type '"a"'
This happens, because TS can't guarantee that there is no other keys in the object. Thus, it can't guarantee that key will be ONLY 'a'.
In your case, this means that TS can't ensure that value of obj[key] will be number. It might be anything, thus TS throws an error.
Example
Option #1
One way to handle this is to force TS to use your types:
//1st attempt
Object.entries(obj).forEach(([key, value]) => {
if (value === undefined || value < 5) obj[key as keyof typeof obj] = 5;
});
//2nd attempt
Object.entries(obj).forEach(
([key, value]) => {
if (value === undefined || value < 5) obj[key as keyof typeof obj] = 5;
}
);
This is OK in case you are absolute sure that no extra keys will be present.
Option #2
Another way is to redesign your types into something a bit more generic:
type objType = {
prop1: number | undefined;
prop2: number | undefined;
prop3: number | undefined;
}
const obj: Record<string, number | undefined> = {
prop1: 2,
prop2: 0,
prop3: undefined,
};
//1st attempt
Object.entries(obj).forEach(([key, value]) => {
if (value === undefined || value < 5) obj[key] = 5;
});
//2nd attempt
Object.entries(obj).forEach(
([key, value]) => {
if (value === undefined || value < 5) obj[key] = 5;
}
);
At the code above we are clearly states that we allows any string keys.
Please check for some extra details
Option 3: Use a key signature
On your type objType add a key signature like so:
[key: string]: number | undefined;
Here is the full code example:
type objType = {
[key: string]: number | undefined;
prop1: number | undefined;
prop2: number | undefined;
prop3: number | undefined;
};
const obj: objType = {
prop1: 2,
prop2: 0,
prop3: undefined,
};
//1st attempt
Object.entries(obj).forEach(([key, value]) => {
if (value === undefined || value < 5) obj[key] = 5;
});
//2nd attempt
Object.entries(obj).forEach(
([key, value]: [keyof objType, number | undefined]) => {
if (value === undefined || value < 5) obj[key] = 5;
}
);
Here is a screenshot showing VSCode is recognizing the typing: