Object.keys iteration causing Typescript error "Element implicitly has an 'any' type because index expression is not of type 'number'"

Question

I am trying to display the results of an API call that returns an object. In order to do a .map, I used Object.keys so that it will display the results.

I'm learning new to Typescript and attempting to practice in a personal project, but I'm stumped by this problem.

I am making an API call and getting back an object. In order to print the values, I'm using Object.keys to map over the values.

rates: Object
EUR: 0.8157272208
AUD: 1.3138918346
BRL: 5.1119993474
GBP: 0.7409087201
base: "USD"
date: "2020-12-18"

Here is my codesandbox (if I switch to a .ts file the whole thing blows up) https://codesandbox.io/s/challenge-7-fetch-a-list-final-forked-7wtwu?file=/src/index.js

TypeScript error in /Users/username/gitrepos/crypto-convert/src/App.tsx(60,39):
Element implicitly has an 'any' type because index expression is not of type 'number'.  TS7015

    58 |               Object.keys(cryptos).map((crypto, index) => (
    59 |                 <li key={index}>
  > 60 |                   {crypto} : {cryptos[crypto]}
       |                                        ^
    61 |                 </li>

There are some funky solutions online and ways to get around the error, but I don't want to do anything hacky as the point is to learn more about TS. Can anyone help me figure out what I've done wrong here? Thanks!

Answer 1

Object.keys is badly typed and returns string[] instead of the key of the argument. Thus, crypto cannot be ensured to be a key of cryptos. One way to circumvent this is to cast Object.keys:

(Object.keys(cryptos) as keyof typeof cryptos).map(...)

Or, to just use Object.entries to iterate over both keys and values:

Object.entries(cryptos).map(([key, value], index) => (
    <li key={index}>
        {key}: {value}
    </li>
)