Object.keys 迭代导致 Typescript 错误“元素隐式具有 'any' 类型，因为索引表达式不是 'number' 类型”

我正在尝试显示返回对象的 API 调用的结果。为了制作 .map，我使用了Object.keys以便它显示结果。

我正在学习 Typescript 的新知识，并尝试在个人项目中进行练习，但我被这个问题难住了。

我正在进行 API 调用并取回一个对象。为了打印这些值，我使用 Object.keys 来映射这些值。

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

这是我的codesandbox（如果我切换到 .ts 文件，整个事情就会崩溃）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>

网上有一些时髦的解决方案和解决该错误的方法，但我不想做任何黑客的事情，因为重点是了解有关 TS 的更多信息。谁能帮我弄清楚我在这里做错了什么？谢谢！

Object.keys打字错误并返回string[]而不是论证的关键。因此，crypto不能确保是关键cryptos。避免这种情况的一种方法是强制转换Object.keys:

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

或者，只使用Object.entries迭代键和值：

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