close

[Solved] Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘{}’

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘{}’ in reactjs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How To Solve Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘{}’ Error ?

  1. How To Solve Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}' Error?

    To Solve Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}' Error the reason for the error is an object type is just an empty object by default. Therefore it isn't possible to use a string type to index {}. T extends empty object. U extends the keys of T. Therefore U will always exist on T, therefore it can be used as a look-up value.

  2. Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'

    To Solve Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}' Error the reason for the error is an object type is just an empty object by default. Therefore it isn't possible to use a string type to index {}. T extends empty object. U extends the keys of T. Therefore U will always exist on T, therefore it can be used as a look-up value.

Solution 1

 items: object[],

While technically it is a JavaScript object, the type can be better. For Typescript to correctly help you identify mistakes when accessing objects properties, you need to tell it the exact shape of the object. If you type it as object, typescript cannot help you with that. Instead, you could tell it the exact properties and datatypes the object has:

  let assistance: { safe: string } = { safe: 1 /* typescript can now tell this is wrong */ };
  assistance.unknown; // typescript can tell this wont really work too

Now in the case that the object can contain any sort of key/value pair, you can at least tell typescript what type the values (and the keys) have, by using an object index type:

 items: {
   [key: string]: number | string,
  }[]

That would be the accurate type in the case given.

Solution 2

If it’s a pedantic javascript object that doesn’t make sense to create type definitions per field for and doesn’t make sense as a class definition, you can type the object with and typescript will let you index however you want. Example.

//obviously no one with two brain cells is going to type each field individually
let complicatedObject: any = {
    attr1: 0,
    attr2: 0,
    ...
    attr999: 0
}

Object.keys(complicatedObject).forEach(key => {
    complicatedObject[key] += 1;
}

Solution 3

First of all, defining the type of items as an array of objects is a bad idea, as it defeats the purpose of Typescript. Instead, define what type of objects the array will contain. I would do it this way:

type Item = {
  id: number,
  name: string,
  email: string,
}

export type TableGridViewProps = {
  items: Item[],
  tableColumns: TableColumn[]
};

After that, if you’re absolutely sure that the key would exist in item, you can do the following to tell Typescript that you are accessing a valid index.

<td
  key={column.key}
  className="lorem ipsum"
>
  {item[column.key as keyof typeof Item]}
</td>

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also, Read

Leave a Comment