Implicitly has an `any` type becoz index expression is not of type 'number'.ts(7015)

Question

I am using Zxing Scanner component in Angular version 12. I faced this error in many places..

/**
 * Returns a valid BarcodeFormat or fails.
 */
private getBarcodeFormat(format: string | BarcodeFormat): BarcodeFormat {
  return typeof format === 'string'
    ? BarcodeFormat[format.trim().toUpperCase()]
    : format;
}

Error is in this line [format.trim().toUpperCase()] and when I hover it will show Element implicitly has an 'any' type because index expression is not of type 'number'.ts(7015) .

Why this error came?? How do I resolve it??

I need a perfect solution without change any configuration in my angular.json or package.json

Answer 1

The reason why the error occurred is because format is a string and can be anything so when you use it in BarcodeFormat , typescript doesn't know whether format is one of the keys of BarcodeFormat .

Therefore, we need to tell typescript format is actually part of the keys in BarcodeFormat .

To do it, we can use the combination of keyof typeof to get the keys in BarcodeFormat and do type casting on format .

private getBarcodeFormat(format: string | BarcodeFormat): BarcodeFormat {
    return typeof format === "string"
      ? BarcodeFormat[format.trim().toUpperCase() as keyof typeof BarcodeFormat]
      : format;
}

Here is the codesandbox for demonstration.