对象键迭代导致打字稿错误"Element implicitly has an 'any' type because index expression is not of type 'number

Question

我正在尝试显示返回对象的API调用的结果。为了做一个.map，我使用了Object.keys，这样它就会显示结果。

我正在学习打字，并试图在个人项目中练习，但我被这个问题难住了。

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

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

这是我的代码沙盒(如果我切换到.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的信息。有人能帮我找出我在这里做错了什么吗？谢谢

Answer 1

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>
)