Element implicitly has an ‘any’ type because index expression is not of type ‘number’ error in TypeScript

Why this error occurs ?

Imagine you have a container that is full of different sports balls, like a cricket ball, a football and a volleyball. Each ball has a number assigned to it, so the cricket ball might be number 1, the football number 2, volleyball number 3, and so on.

Now imagine that your friend asks you to give them the ball with number “banana” but you assigned the balls with numbers, not words. So you don’t have a ball with that number, so you don’t know what to give them. This is a bit like the error message you’re seeing.

In programming, when you work with arrays or objects, you can access their elements using an index. This index should be a number that corresponds to the position of the element in the array or object. However, if you try to access an element using an index that is not a number (e.g. a string like “banana”), you will get the error message that “Element implicitly has an ‘any’ type because index expression is not of type ‘number’.(7015)”.

The error can occur in 2 ways

1st way :

const arr = ['bat', 'ball', 'car'];

// ⛔️ Error: Element implicitly has an 'any' type
// because index expression is not of type 'number'.ts(7015)
const result1 = arr['bat'];

In the above code error occurs because TypeScript assumes that the index used to access the array element is a number. However, in this case, the index used is a string (‘bat’) which is not a valid index for an array.

2nd way :

const obj: { [id: number]: string } = {
  0: 'bat',
  1: 'ball',
};

// ⛔️ Error: Element implicitly has an 'any' type because
// index expression is not of type 'number'.ts(7015)
const result2 = obj['bat'];

In TypeScript, when you define an object with numeric keys,
you can specify the key type as a number using the index signature notation
{ [id: number]: string }. This tells TypeScript that the object can only be indexed with numbers, and the values of the object will be of type “string“.

When you try to access the object property using a string index, TypeScript will throw this error because the index is not of type “number” as expected.

How to fix this error ?

We have three ways to fix the error :

1. Access the property using a valid number index

If the object has numeric keys, we can access the property using a valid number index, like this:

// Example 1:

const arr = ['bat', 'ball', 'car'];

const result1 = arr[0];
console.log(result1); // Output: "bat" ;



//Example 2:
const obj: { [id: number]: string } = {
  0: 'bat',
  1: 'ball',
};

const result2 = obj[0];
console.log(result2); //Output: "bat" ;

In this case, we’re accessing the property with the key 0, which is a valid number index for the “obj“ object.

2. Using a type assertion

We can also use a type assertion to tell TypeScript the type of the index being used. A type assertion is a way of telling TypeScript the type of a value when TypeScript is unable to infer it automatically.

const arr = ['bat', 'ball', 'car'];

const result1 = arr['1' as unknown as number];
console.log(result1); // Output: "ball" ;

3. permanent fix for the error

If you want to fix the implicit “any“ index errors for your entire project, so you can paste this code inside your tsconfig.json file.

{
  "compilerOptions": {
    "suppressImplicitAnyIndexErrors": true,
    // ... rest
  }
}

When TypeScript encounters an index signature that has an implicit “any“ type, it will raise an error by default because it is considered a potential mistake. However, setting "suppressImplicitAnyIndexErrors" to ‘true‘ will suppress these errors and allow the compiler to proceed without raising them.

Note that while suppressing these errors may be useful in certain cases, it can also hide potential bugs and make it harder to catch errors. Therefore, it is recommended to use this flag with caution and only if you have a good reason to do so.