Object.keys 迭代导致 Typescript 错误“元素隐式具有‘任何’类型,因为索引表达式不是‘数字’类型”

Posted

技术标签:

【中文标题】Object.keys 迭代导致 Typescript 错误“元素隐式具有‘任何’类型,因为索引表达式不是‘数字’类型”【英文标题】:Object.keys iteration causing Typescript error "Element implicitly has an 'any' type because index expression is not of type 'number'" 【发布时间】:2021-03-30 15:31:24 【问题描述】:

我正在尝试显示返回对象的 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"

这是我的代码和框(如果我切换到 .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 的信息。谁能帮我弄清楚我在这里做错了什么?谢谢!

【问题讨论】:

【参考方案1】:

Object.keys 输入错误并返回 string[] 而不是参数的键。因此,不能保证cryptocryptos 的键。避免这种情况的一种方法是投射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 错误“元素隐式具有‘任何’类型,因为索引表达式不是‘数字’类型”的主要内容,如果未能解决你的问题,请参考以下文章

javascript中 for in for forEach for of Object.keys().

为啥 Object.keys 不是 Object.prototype.keys? [关闭]

js es6 map 与 原生对象区别

Object.keys(),Object.values(),Object.entries()

Javascript:为啥是 Object.keys(someobject),而不是 someobject.keys?

Joi.object() 和 Joi.object().keys() 有啥区别?