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

Hello Guys, How are you all? Hope You all Are Fine. Today I am facing 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 Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index in ReactJs Error Occurs ?

This Code gives me the following error.

    plotOptions: {
      name_1: true,
      name_2: true,
    }

const plotData: Array<trainInfo> = [{name:"name_1"},{name:"name_2"}].filter(({ name }) => plotOptions[name]);

But I am facing this error.

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ science: null; social: null; math: null; }'. No index signature with a parameter of type 'string' was found on type '{ science: null; social: null; math: null; }'.

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

Solution 1

This happens because you try to access plotOptions property using string name. TypeScript understands that name may have any value, not only property name from plotOptions. So TypeScript requires to add index signature to plotOptions, so it knows that you can use any property name in plotOptions. But I suggest to change type of name, so it can only be one of plotOptions properties.

Now you’ll be able to use only property names that exist in plotOptions. You also have to slightly change your code. First assign array to some temp variable, so TS knows array type:

const plotDataTemp: Array<trainInfo> = [
    {
      name: "name_1",
    },
}

Then filter:

const plotData = plotDataTemp.filter(({ name }) => plotOptions[name]);

If you’re getting data from API and have no way to type check props at compile time the only way is to add index signature to your plotOptions:

type tplotOptions = {
    [key: string]: boolean
}

const plotOptions: tplotOptions = {
    name_1: true,
    name_2: true,
}

Solution 2

When using Object.keys, the following works:

Object.keys(this)
    .forEach(key => {
      console.log(this[key as keyof MyClass]);
    });

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?

Also Read

• SyntaxError: invalid syntax to repo init in the AOSP code.