Итерация Object.keys, вызывающая ошибку Typescript "Элемент неявно имеет тип 'any', поскольку индексное выражение не имеет типа 'number'"

#javascript #typescript #object #key #codesandbox

#javascript #typescript #объект #Клавиша #codesandbox

Вопрос:

Я пытаюсь отобразить результаты вызова API, который возвращает объект. Чтобы сделать .map, я использовал Object.keys so, чтобы он отображал результаты.

Я изучаю 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. Кто-нибудь может помочь мне выяснить, что я здесь сделал не так? Спасибо!

Ответ №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>
)