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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
0
2 006
1
Перейти к ответу Данный вопрос помечен как решенный

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

Спасибо за это объяснение!

stonerose036 20.12.2020 19:25

Другие вопросы по теме