Как можно обратиться к свойству объекта передав константу из useState?

Question

[pinkhead_psd]

Объект "wwCodes" хранит в себе значения типа: ключ число: свойство строка. Мне нужно обратиться к нему таким образом wwCodes[wwCode], wwCode это стейт в который просто передается цифра. Но происходит ошибка: Элемент неявно имеет тип "any", так как выражение типа "number" не может использоваться для индексации типа "{ 0: string; 1: string; 2: …}". Пробовал дженериком дать useState тип number - безуспешно.
Вот как выглядит кусок объекта:

const wwCodes = {
    0:'Clear sky',
    1:'Mainly clear',
    2:'Partly cloudy',
    3:'Overcast',
    45:'Fog',
}

Так я задаю стейт:
const [wwCode, setWwCode] = useState<number>(0);

И вот так пытаюсь обратиться:
<span>{wwCodes[wwCode]}</span>

Comments

[Александр]

Проблема скорее всего возникает из-за того, что TypeScript не может определить тип значения, которое возвращается при обращении к объекту по индексу number
Попробуй так

interface WwCodes {
  [key: number]: string;
}

const wwCodes: WwCodes = {
  0: 'Clear sky',
  1: 'Mainly clear',
  2: 'Partly cloudy',
  3: 'Overcast',
  45: 'Fog',
};

const [wwCode, setWwCode] = useState<number>(0);

<span>{wwCodes[wwCode]}</span>

[WbICHA]

Александр, ммм, практически убираем типизацию, круто.

Автору:
useState<keyof typeof wwCodes>(0);

[pinkhead_psd]

Александр, спасибо! думал, что в этом проблема, но как их указать не доехал

[WapSter]

Жесть, pinkhead_psd а ты в курсе, что ключи объекта не могут быть ничем кроме строк? И твои числа все равно преобразуются в строку

[WbICHA]

WapSter, фактически да, но в чём проблема-то? Тем более в тсе, тут если ключи достать (в виде типа), это будут числа.

Answer 1

[teenager_python]

Я бы конечно сделал, вот таким образом

const [weatherCodes, setWeatherCodes] = useState({
  0: 'Clear sky',
  1: 'Mainly clear',
  2: 'Partly cloudy',
  3: 'Overcast',
  45: 'Fog',
});

И обратился бы потом
const partlyCloudy = weatherCodes[2];

Answer 2

[Mikhail Osher]

Проблема в том, что тип wwCodes при таком объявлении будет равен

{ 0: string, 1: string, 2: string, 3: string, 45: string }

, но никак не { [key: number]: string }, который ожидали бы.

Зависит от условия задачи.

wwCodes статически захардкожен в коде и не будет меняться на протяжении работы скрипта?
useState<keyof typeof wwCodes>

wwCodes - это некий generic объект, который мы получим извне (props, hooks, context), но мы предполагаем такую структуру?

type WwCodes = Record<number, string | undefined>
const wwCodes: WwCodes = ...