Object.keys 迭代导致 Typescript 错误 "Element implicitly has an 'any' type because index expression is not of type 'number'"

Question

我正在尝试显示 API 调用 returns 一个对象的结果。为了做一个 .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 的信息。谁能帮我弄清楚我在这里做错了什么？谢谢！

Answer 1

Object.keys 键入错误，returns string[] 而不是参数的键。因此，crypto不能保证是cryptos的key。避免这种情况的一种方法是投射 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>
)

Object.keys 迭代导致 Typescript 错误 "Element implicitly has an 'any' type because index expression is not of type 'number'"

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

javascript

key

object

typescript

codesandbox