How to solve error “Element implicitly has ‘any’ type because index expression is not of type ‘number'”?

Knowing how to solve the error “Element implicitly has ‘any’ type because index expression is not of type ‘number'” will help you a lot when working with a list. So how to do it? Let’s go into detail now.

The reason of the error “Element implicitly has ‘any’ type because index expression is not of type ‘number'”

The error happens when you pass in the index operator, not a number.

Example: 

const animals = [
    "Warthog",
    "Wild Rabbits",
    "Wolves",
    "Tapir",
    "Snares Penguin",
    "Snow Leopard",
    "Red Panda",
    "Red Fox"
];

const animal = animals["Warthog"];
console.log(animal);

Code error:

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

In here, the error occurs because I pass in the index operator “Warthog” string, not a number. 

How to fix this error?

Pass in number

The obvious solution here is to pass the index operator a number to get an element, not a string.

Example:

const animals = [
    "Warthog",
    "Wild Rabbits",
    "Wolves",
    "Tapir",
    "Snares Penguin",
    "Snow Leopard",
    "Red Panda",
    "Red Fox"
];

const animal = animals[4];
console.log(animal);

Output:

"Snares Penguin"

Ignore the error

You can ignore the error with the solution below.

Set ‘any’ type

If you set explicit type of array to any, the error won’t happen, but if the index operator you pass is incorrect, it will be replaced by undefined.

Example:

const animals: any = [
    "Warthog",
    "Wild Rabbits",
    "Wolves",
    "Snow Leopard",
    "Red Panda",
    "Red Fox"
];

const animal = animals["Snares"];
console.log(animal);

Output:

undefined

Setting tsconfig.json file

You can set this line to your tsconfig.json file:

"suppressImplicitAnyIndexErrors": true

Example:

{
  	"compilerOptions": {
  		"suppressImplicitAnyIndexErrors": true
	}
}

That code line will turn off the error notification from Typescript, and then you can ignore the error.

Use another type

Use ‘Map’ type

If you want to use a key/value data structure, you can use Map type.

Example:

const animals = new Map<string, number>([
    ["Warthog", 4],
    ["Wolves", 4],
    ["Tapir", 4],
    ["Penguin", 2],
    ["Snow Leopard", 4],
    ["Red Panda", 4],
    ["Red Fox", 4]
]);
  
console.log(`Red Panda have ${animals.get("Red Panda")} leg`);  

Output:

"Red Panda have 4 leg"

Here I can get value via key string using get() method in Map type.

Use object type

We can use object type

Example:

const animals = {
    Warthog: 4,
    Wolves: 4,
    Tapir: 4,
    SnaresPenguin: 2
};
  
console.log(`Tapir have ${animals["Tapir"]} legs`);  

Output:

"Tapir have 4 legs"

Summary

In this tutorial, I’ve showed you how to solve the error “Element implicitly has ‘any’ type because index expression is not of type ‘number'”. You can explicitly set the type to any or set it in tsconfig.json file to remove the error. You can also replace the type of array to Map or ‘object’ type if you want to work with key/value data structure.

Maybe you are interested:

• this’ implicitly has type ‘any’ error in TypeScript
• “A spread argument must either have a tuple type or be passed to a rest parameter”
• “element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type”

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm