Возникла ошибка Typescript при попытке извлечь состояние из объекта History с помощью свойства enum

Question

У меня есть перечисление, которое выглядит примерно так:

enum values {
  first,
  second,
}

И в моем компоненте я обращаюсь к объекту истории как,

const { push, location: { state = {} } } = useHistory();

В том же компоненте в useEffect, делаю что-то вроде,

const { first } = values;
useEffect(() => {
  if (!state[first]) {
    // do something
  }
}, []);

Это выдает ошибку,

Element implicitly has an 'any' type because expression of type 
'values.first' can't be used to index type '{}'.
  Property '[values.first]' does not exist on type '{}'.ts

Что я здесь не так делаю? Я должен написать свой собственный интерфейс для state?

Answer 1

Проблема здесь,

const { push, location: { state = {} } } = useHistory();
                                  ^

Потому что вы деструктурируете со значением состояния по умолчанию, являющимся пустым объектом ({}). TS выведет ключ и значение как any.

Решение состоит в том, чтобы предоставить явный тип для LocationState, передав аргумент типа generi c в вызов useHistory. Для перечисления, с которым вы работаете, тип может выглядеть примерно так:

enum values {
  first,
  second,
}

type TLocState = { [key in values]: string /* desired type for value */ }

const { push, location: { state } } = useHistory<TLocState>();

// someVal will be infered as string
const someVal = state[values.first]

Взгляните на ts игровую площадку