Element implicitly has 'any' type because index expression is not of type 'number'

avatar

Borislav Hadzhiev

Last updated: Mar 27, 2022

banner

Photo from Unsplash

Element implicitly has 'any' type because index expression is not of type 'number' #

The error "Element implicitly has 'any' type because index expression is not of type 'number'" occurs when an array is indexed with a value that is not a number. To solve the error, use an object if storing key-value pairs or use a type assertion.

element implicitly has any type index expression not number

Here are 2 examples of how the error occurs.

index.ts
const arr = ['a', 'b', 'c']; // ⛔️ Error: Element implicitly has an 'any' type // because index expression is not of type 'number'.ts(7015) const result = arr['a']; // -------------------------------------------------- const obj: { [key: number]: string } = { 0: 'a', 1: 'b', }; // ⛔️ Error: Element implicitly has an 'any' type because // index expression is not of type 'number'.ts(7015) const result2 = obj['a'];

In the first example, we try to use a string to access an array element at index.

In the second example, we have an object with numeric keys and trying to use a string key to index it.

If you are trying to access an array element at index, use a zero-based number.

index.ts
const arr = ['a', 'b', 'c']; const result = arr[0]; console.log(result); // 👉️ "a"

If the type of the value you're using to index the array or object is incorrect, you can use a type assertion.

index.ts
const arr = ['a', 'b', 'c']; const result = arr['1' as unknown as number]; console.log(result); // 👉️ "b"

Type assertions are used when we have information about the type of a value that TypeScript can't know about.

We effectively tell TypeScript that the specific value is of type number and not to worry about it.

If you want to suppress the implicit any index errors for your entire project, you can do that in your tsconfig.json file.

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

When the suppressImplicitAnyIndexErrors option is set to true, no implicit any errors are reported when indexing into objects or arrays.

If you are trying to store key-value pairs, use an object with an index signature and string keys.

index.ts
type Person = { [key: string]: any; }; const obj: Person = { name: 'James', }; obj.age = 30; obj.salary = 100; obj.tasks = ['develop', 'test']; console.log(obj['age']); // 👉️ 30 console.log(obj['salary']); // 👉️ 100

The {[key: string]: any} syntax is an index signature in TypeScript and is used when we don't know all the names of a type's properties and the shape of the values ahead of time.

The index signature in the example means that when an the object is indexed with a string, it will return a value of any type.

You can also explicitly add property names and types you know about in advance.

index.ts
type Person = { [key: string]: any; name: string; // 👈️ add name property of type string country: string; // 👈️ add country property of type string }; const obj: Person = { name: 'James', country: 'Germany', }; obj.age = 30; obj.salary = 100; obj.tasks = ['develop', 'test']; console.log(obj['age']); // 👉️ 30 console.log(obj['salary']); // 👉️ 100

We explicitly typed the name and country properties. This provides better type safety and IDE autocompletion for the specified properties.

Conclusion #

The error "Element implicitly has 'any' type because index expression is not of type 'number'" occurs when an array is indexed with a value that is not a number. To solve the error, use an object if storing key-value pairs or use a type assertion.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.