Error encountered while transforming object due to index type mismatch

Question

Error encountered while transforming object due to index type mismatch

I am attempting to change the values of an object, which consist of arrays with numbers as keys, to their respective array lengths.

However, I received a type error that says 'Element implicity has any type because a string element cannot be used to index an object.' I am confused why it is assuming the key is a string when it should be a number.

The code snippet in question is:

  const agentOccupancy = Object.entries(agentOccupiedServicesAndQueues).reduce(
        (obj, [key, value]) => {
          obj[key] = value.length;
          return obj;
        },
        {},
      );

https://i.sstatic.net/8g7bZ.png

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

typescript

Answer 1

Answer №1

Object.entries and Object.keys always provide string representations of numeric keys from your object.

Object.keys(["a", "b", "c"]); // an array with numeric keys
--> ["0", "1", "2"] // the console output shows an array of strings

The error message "can't be used to index type '{}'" relates to the accumulator's type in your .reduce() callback. Initially set as {}, Typescript only recognizes this, so any property outside of {} will prompt an error.

To resolve this issue, we must assign a type to the accumulator. We can use Record<string | number, number>, indicating that any string or number key will return a number value consistently.

const agentOccupancy = Object.entries(agentOccupiedServicesAndQueues).reduce(
  (obj: Record<string | number, number>, [key, value]) => {
    obj[key] = value.length;
    return obj;
  },
  {}
);

The resulting agentOccupancy object would appear as follows: {"0": 1}. You have the flexibility to access the value using either string keys such as "0" or numeric keys like 0.

console.log(agentOccupancy["0"]);
console.log(agentOccupancy[0]);

Visit the Typescript Playground Link for more information

Answer 2

Object.entries and Object.keys always provide string representations of numeric keys from your object.

Object.keys(["a", "b", "c"]); // an array with numeric keys
--> ["0", "1", "2"] // the console output shows an array of strings

The error message "can't be used to index type '{}'" relates to the accumulator's type in your .reduce() callback. Initially set as {}, Typescript only recognizes this, so any property outside of {} will prompt an error.

To resolve this issue, we must assign a type to the accumulator. We can use Record<string | number, number>, indicating that any string or number key will return a number value consistently.

const agentOccupancy = Object.entries(agentOccupiedServicesAndQueues).reduce(
  (obj: Record<string | number, number>, [key, value]) => {
    obj[key] = value.length;
    return obj;
  },
  {}
);

The resulting agentOccupancy object would appear as follows: {"0": 1}. You have the flexibility to access the value using either string keys such as "0" or numeric keys like 0.

console.log(agentOccupancy["0"]);
console.log(agentOccupancy[0]);

Visit the Typescript Playground Link for more information

Error encountered while transforming object due to index type mismatch

Answer №1

Similar questions

The reason for duplicating the import of an NPM package in TypeScript (specifically for Firebase Functions)

"Using TypeScript: How to effectively wait for the completion of the array.sort

Testing Slack's Web API with Jest for mock purposes

Changing the environment variable in an Angular application with user input

Listening for keypress events on a div element using React

Navigate to a new page on button click using Row with Tanstack / React-Table and Typescript (2339)

Locating a class variable using a string chosen from a DropDown menu

Why is it that TypeScript's flow analysis does not extend to the 'else' block?

What are the steps for creating a custom repository with TypeORM (MongoDB) in NestJS?

Executing a function in the constructor of an Angular4 component

The default behavior of Angular-Keycloak does not include automatically attaching the bearer token to my http requests

What is the best way to handle typing arguments with different object types in TypeScript?

Is there a way to integrate the AuthState TypeScript Interface into the react-oidc-context Node package for testing in Next.js?

Utilize the composite primary key of an Entity within Typeorm for efficient data retrieval

Locate the minimum and maximum values between two inputted dates

Error when compiling TypeScript: The callback function provided in Array.map is not callable

Update the js file by incorporating the import statement

Effortlessly collapsing cards using Angular 2 and Bootstrap

The flow union type operates smoothly without any errors occurring

Step-by-step guide on setting up cosmosDB databases and containers in azure functions with the node sdk