The error: “TypeScript – Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type” is a common error that can show up in many ways. In this blog, we will go through some of the ways you can fix this issue. Read on.

The cause of the “TypeScript – Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type” error

Assume you run this code:

const exp_sub = {

    mercury: null,
    venus: null,
    jupiter: null,
    neptune: null,
    Mars: null

};

const newPlanet = ['mercury', 'venus', 'jupiter', 'neptune', 'Mars' ].filter(e => exp_sub[e]);

However, you encounter this issue:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ mercury: null; venus: null; jupiter: null; neptune: null; Mars: null }'. No index signature with a parameter of type 'string' was found on type '{ mercury: null; venus: null; jupiter: null; neptune: null; Mars: null }'.

You are having trouble with this error because you are attempting to utilize a string to index an item or object with definite key. However, you must confirm that the specified string is one of the object’s keys since TypeScript warns you that the type string is too large and not all strings are objects’ keys.

The as const instructs the compiler to generate a tuple consisting of precisely the three string literals in the array, in the order you specify. (It’s a read-only tuple, too). That should suffice to solve your problem.

How to solve “TypeScript – Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type” issue

Approach 1: 

To instruct TypeScript to get off your back on this one (called explicit any), declare sub as any:

const exp_sub : any = {

    mercury: null,
    venus: null,
    jupiter: null,
    neptune: null,
    Mars: null

};

Strong typing, on the other hand, is preferred if at all possible:

const exp_sub : { [key: string]: any } = {

    mercury: null,
    venus: null,
    jupiter: null,
    neptune: null,
    Mars: null

};

Approach 2: 

The quickest way to achieve this kind of type inference from the compiler provided that you’re running TS3.4 or later, is to utilize a const assertion:

const constAssertion = ['mercury', 'venus', 'jupiter', 'neptune', 'Mars' ] as const;

The as const instructs the compiler to generate a tuple consisting of precisely the three string literals in the array, in the order you specify. (It’s a read-only tuple, too.) That should suffice to solve your problem:

const newPlanet = (["mercury", "venus", "jupiter", "neptune", "Mars"] as const).filter(e => exp_sub[e]);

Approach 3:

An effective way to solve ”TypeScript – Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type” is using a type assertion as the following case: 

const exp_string1 = 'name' as string;
const exp_string2 = 'country' as string;
const exp_string3 = 'age' as string;

const exp_object = {
name: 'Lucas Diaz',
country: 'Argentina',
age: 32
};

console.log(exp_object[exp_string1 as keyof typeof exp_object]);
console.log(exp_object[exp_string2 as keyof typeof exp_object]);
console.log(exp_object[exp_string3 as keyof typeof exp_object]);

Output:

"Lucas Diaz"
"Argentina"
32

You had better use a type assertion to tell TypeScript that the str variable is a union type that solely contains the object’s keys rather than a string. Now TypeScript is available, you can access the particular property without getting any error. To obtain a union type of the object’s keys, you also can use keyof typeof.

Conclusion

We hope you enjoyed our article about the error. With this knowledge, we know that you can fix your error: “TypeScript – Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type” quickly by following these steps! If you still have any other questions about fixing this syntax error, please leave a comment below. Thank you for reading!

Read more

→ Tips On Solving The Error “Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index in ReactJs”