“Element Implicitly Has An ‘Any’ Type Because Expression Of Type ‘String’ Can’t Be Used To Index Type #” Error In TypeScript – How To Fix It?

This article shows you how to fix the “element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type #” error in TypeScript. Read on it now.

Why does the error occur?

When you try to use a string for the purpose of indexing an object in TypeScript, you will get an error message: “element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type #”. The solution for this error is you must type the string to a value that exists in the keys of the object.

Let me reproduce the error in this example:

interface Plane{
    code: string,
    capacity: number,
    airline: string
}
 
const firstPlane: Plane = {
    code: 'VN-2868',
    capacity: 200,
    airline: 'Vietnam Airline'
};
 
const accessKey = 'code' as string;
 
console.log(firstPlane[accessKey]);

Output:

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

How to fix “element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type #” error?

Method 1: Use the ‘keyof’ operator

The ‘keyof’ operator takes an object type and creates a conjugate type of the object’s keys. In my opinion, this method can be considered the best.

interface Plane{
    code: string,
    capacity: number,
    airline: string
}
 
type keys = keyof Plane;  // type keys = "code" | "capacity" | "airline"

Now we will apply this operator for our problem. Take a look at the example below:

interface Plane{
    code: string,
    capacity: number,
    airline: string
}
 
const firstPlane: Plane = {
    code: 'VN-2868',
    capacity: 200,
    airline: 'Vietnam Airline'
};
 
const accessKey1: keyof Plane = 'code';
const accessKey2: keyof Plane = 'capacity';
const accessKey3: keyof Plane = 'airline';
 
console.log(firstPlane[accessKey1]);
console.log(firstPlane[accessKey2]);
console.log(firstPlane[accessKey3]);

Output:

"VN-2868"
200
"Vietnam Airline" 

In this example, I defined a type named ‘Plane’ with three properties: code, capacity, and airline. Initialized an object of ‘Plane’ type with the corresponding properties.

Then we can use indexes with variables containing only values ​​that are properties of the object without worrying about errors.

An error will occur if you define a value that is not a key in the object.

const accessKey1: keyof Plane = 'color';

Output:

Type '"color"' is not assignable to type 'keyof Plane'

Another approach with the ‘keyof’ operator, you will be working directly with ‘Plane’ type instead of through the object.

interface Plane{
    code: string,
    capacity: number,
    airline: string
}
 
const firstPlane: Plane = {
    code: 'VN-2868',
    capacity: 200,
    airline: 'Vietnam Airline'
};
 
const accessKey1 = 'code' as string;
const accessKey2 = 'capacity' as string;
const accessKey3 = 'airline' as string;
const accessKey4 = 'color' as string;
 
console.log(firstPlane[accessKey1 as keyof Plane]);
console.log(firstPlane[accessKey2 as keyof Plane]);
console.log(firstPlane[accessKey3 as keyof Plane]);
// Return undefined value instead of throw out an error
console.log(firstPlane[accessKey4 as keyof Plane]);

Output:

"VN-2868"
200
"Vietnam Airline" 
undefined

Method 2: Use Type Assertion

In this example, we use the ‘keyof‘ operator in combination with type assertion.

interface Plane{
    code: string,
    capacity: number,
    airline: string
}
 
const firstPlane: Plane = {
    code: 'VN-2868',
    capacity: 200,
    airline: 'Vietnam Airline'
};
 
const accessKey1 = 'code' as string;
const accessKey2 = 'capacity' as string;
const accessKey3 = 'airline' as string;
 
console.log(firstPlane[accessKey1 as keyof typeof firstPlane]);
console.log(firstPlane[accessKey2 as keyof typeof firstPlane]);
console.log(firstPlane[accessKey3 as keyof typeof firstPlane]);

Output:

"VN-2868"
200
"Vietnam Airline" 

The purpose of using type assertion is to tell the TypeScript compiler that we are using the value that is the key of the object. So TypeScript will allow us to access the properties without any error.

Summary

Through this article, you know how to fix the “element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type #” error in TypeScript. Thanks for reading the whole post.

Maybe you are interested:

• “Property has no initializer and is not definitely assigned in the constructor”
• Argument type ‘string or null’ not assignable to parameter of type string

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js