typescript: how to correctly type key and value parameters in Object.entries().forEach([key,value]) =>

Question

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 incompatible. Type '[string, number | undefined]' is not assignable to type '[keyof objType, number | undefined]'. Type at position 0 in source is not compatible 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 ?

Drag13 · Accepted Answer · 2021-12-20 11:24:44Z

7

Why

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

edited Dec 20, 2021 at 11:24

answered Dec 20, 2021 at 10:30

Drag13

6,0281 gold badge22 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sebastien D Over a year ago

Thanks a lot for quick and detailled answer. I didn't figured out that TS could consider the case where a key is different from keyof obj, as it comes litteraly from a map over the existing keys. But ok I can imagine a case where the callback of the foreach may modify more than the current key (even if weird)

Drag13 Over a year ago

@SebastienD To be more clear I've added an example why key is string. Is the question answered, or you need some more help?

Sebastien D Over a year ago

thanks for the new example. It's ok your answer solved my problem, thanks a lot

Fiddle Freak Over a year ago

this fails for me because typescript wants to know the type of the value. I can't figure out where to assign the value a type.

Drag13 Over a year ago

@FiddleFreak could you provide some example? Or open the question?

|

josephdpurcell · Accepted Answer · 2022-08-19 15:01:54Z

3

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:

answered Aug 19, 2022 at 15:01

josephdpurcell

1,5023 gold badges23 silver badges39 bronze badges

Collectives™ on Stack Overflow

typescript: how to correctly type key and value parameters in Object.entries().forEach([key,value]) =>

2 Answers 2

Why

Option #1

Option #2

6 Comments

Option 3: Use a key signature

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Why

Option #1

Option #2

6 Comments

Option 3: Use a key signature

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related