typescript: best practices for typing key and value parameters in the forEach loop of Object.entries()

Question

typescript: best practices for typing key and value parameters in the forEach loop of Object.entries()

I have a specific object with key/value pairs that I need to iterate over using the entries() method of Object followed by a forEach() method of Array. However, I'm struggling to understand how to avoid a typescript error in this situation:

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 my first attempt, I let TypeScript infer the type of key (→ string) and value (→ number|undefined). Unfortunately, I encountered an error when trying to access 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'.

For my second attempt, I tried to enforce the type of key to match the keys of obj using the keyof operator. Surprisingly, this type definition is not allowed and resulted in 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 why the first attempt failed, but I'm puzzled by the issue in the second attempt. It seems like TypeScript is interpreting my intention incorrectly. How should I properly define the types in this scenario?

javascript typescript typescript-typings

Answer 1

Answer №1

Reason Behind the Issue

To comprehend why this issue is occurring, let's examine a basic example:

const obj = {a: 1};
Object.keys(obj).forEach((key:keyof typeof obj)=> ''); // fails because Type 'string' is not assignable to type '"a"'

The error arises because TypeScript cannot guarantee that there are no additional keys in the object. Hence, it cannot assure that the key will only be 'a'.

In your scenario, this implies that TypeScript cannot ensure that the value of obj[key] will be a number. It could potentially be anything, resulting in an error thrown by TypeScript.

Example Link

Possible Solutions

A method to resolve this issue is to enforce TypeScript to utilize your specified 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 approach works well if you are absolutely certain that no extra keys will exist.

Alternative Solution

An alternative approach is to redesign your types into something 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;
    }
);

In the above code snippet, we explicitly state that we allow any string keys.

For additional details, please refer to this link

Answer 2

Reason Behind the Issue

To comprehend why this issue is occurring, let's examine a basic example:

const obj = {a: 1};
Object.keys(obj).forEach((key:keyof typeof obj)=> ''); // fails because Type 'string' is not assignable to type '"a"'

The error arises because TypeScript cannot guarantee that there are no additional keys in the object. Hence, it cannot assure that the key will only be 'a'.

In your scenario, this implies that TypeScript cannot ensure that the value of obj[key] will be a number. It could potentially be anything, resulting in an error thrown by TypeScript.

Example Link

Possible Solutions

A method to resolve this issue is to enforce TypeScript to utilize your specified 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 approach works well if you are absolutely certain that no extra keys will exist.

Alternative Solution

An alternative approach is to redesign your types into something 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;
    }
);

In the above code snippet, we explicitly state that we allow any string keys.

For additional details, please refer to this link

Answer 3

Answer №2

Option 3: Implement a key signature

To apply a key signature to your type objType, include the following code snippet:

  [key: string]: number | undefined;

Below is a comprehensive example of the code in action:

type objType = {
  [key: string]: number | undefined;
  prop1: number | undefined;
  prop2: number | undefined;
  prop3: number | undefined;
};

const obj: objType = {
  prop1: 2,
  prop2: 0,
  prop3: undefined,
};

//First iteration
Object.entries(obj).forEach(([key, value]) => {
  if (value === undefined || value < 5) obj[key] = 5;
});

//Second iteration
Object.entries(obj).forEach(
  ([key, value]: [keyof objType, number | undefined]) => {
    if (value === undefined || value < 5) obj[key] = 5;
  }
);

Check out this screenshot demonstrating VSCode's recognition of the typing:

https://i.sstatic.net/Xs8lP.png

Answer 4

Option 3: Implement a key signature

To apply a key signature to your type objType, include the following code snippet:

  [key: string]: number | undefined;

Below is a comprehensive example of the code in action:

type objType = {
  [key: string]: number | undefined;
  prop1: number | undefined;
  prop2: number | undefined;
  prop3: number | undefined;
};

const obj: objType = {
  prop1: 2,
  prop2: 0,
  prop3: undefined,
};

//First iteration
Object.entries(obj).forEach(([key, value]) => {
  if (value === undefined || value < 5) obj[key] = 5;
});

//Second iteration
Object.entries(obj).forEach(
  ([key, value]: [keyof objType, number | undefined]) => {
    if (value === undefined || value < 5) obj[key] = 5;
  }
);

Check out this screenshot demonstrating VSCode's recognition of the typing:

https://i.sstatic.net/Xs8lP.png

typescript: best practices for typing key and value parameters in the forEach loop of Object.entries()

Answer №1

Reason Behind the Issue

Possible Solutions

Alternative Solution

Answer №2

Option 3: Implement a key signature

Similar questions

Establishing standard emit actions in a Vue JS component layout

How to handle JavaScript exceptions when encountering a null JSON value?

Angular efficient approach to changing object properties

Fluctuating Values in Array Distribution

How can you use JavaScript and regex to extract the word before a comma?

What is the best way to extract values from promises that are still pending?

Different JavaScript entities with identical attributes (labels)

The Event Typing System

Is there a way to trigger an AJAX request right before I leave the page or unload it?

Show the user's username on their profile page by retrieving the name from the database

The socket.io client in my JavaScript code is failing to receive the necessary event

Exploring face detection with Three.js

Verify if a selection of days using momentjs exceeds 7 days

Exploring the power of Partial Views in ASP.NET MVC 4 with Ajax.ActionLink

Send a PHP object to JavaScript using AJAX

What is the process of exporting ES6 from main.js in Vue.js 2.0?

` `issues with fmt:massage tag` `

Oops! There seems to be an error with the <path> attribute. It looks like we were expecting a number, but received something different: "

Issue with Tailwind classes not applying correctly upon refreshing the page in production settings

Changing the background image of the body when hovering over a li element: a step-by-step