Element implicitly has an ‘any’ type because index expression is not of type ‘number’.ts(7015)” error when accessing string value for id

If you are working with TypeScript and encounter the error “Element implicitly has an ‘any’ type because index expression is not of type ‘number’.ts(7015)” when trying to access a string value for an id, don’t worry, you’re not alone. This error occurs when you try to access an object property using a string index instead of a number index. In this article, we will explore a couple of solutions to fix this error.

Solution 1: Use a Union Type

One way to resolve this error is by using a union type for the index. By defining the index as a union of string and number, TypeScript will allow accessing properties using either a string or a number.

interface MyObject {
  [key: string | number]: string;
}

const myObject: MyObject = {
  1: 'Value 1',
  2: 'Value 2',
  'key': 'Value 3',
};

const id: string = 'key';
const value: string = myObject[id];

Solution 2: Use Type Assertion

Another solution is to use type assertion to tell TypeScript that you know the type of the property you are accessing. This can be done by using the “as” keyword followed by the expected type.

interface MyObject {
  [key: string]: string;
}

const myObject: MyObject = {
  'key': 'Value 1',
};

const id: string = 'key';
const value: string = myObject[id] as string;

Conclusion

In this article, we have explored two solutions to fix the “Element implicitly has an ‘any’ type because index expression is not of type ‘number’.ts(7015)” error when accessing a string value for an id in TypeScript. By using a union type or type assertion, you can resolve this error and ensure type safety in your code.