Почему не получается типизировать стейт?

Question

[Bart Simpson]

Сейчас делаю приложение в связке реакт + тс, на основную страницу получаю список разных валют по апи которые идут блок за блоком, но хочу, чтоб при нажатии на блок мне открывалась страница с более подробной информацией об этой валюте. Все вышло, но столкнулся с проблемой типизации стейта. С any все работает, но хочется сделать нормально.

const [currency, setCurrency] = React.useState<any>({}); //ожидаю обьект с сервера 

 const fetchCurrency = async function () {
    try {
      const response = await axios.get<any>(url);
      setCurrency(response.data);
    } catch (e) {
      alert(e);
    }
  };

Код выше работает, данные с сервера приходят и можно продолжать но хочется типизировать стейт и запрос как нужно.

Кодпен с типизацией обьекта который я ожидаю с сервера(интерфесы сделаны при помощи конвертера поэтому ошибок быть не должно) :
https://codepen.io/IvaLu/pen/JjZjMgo?editors=0010

Далее я типизирую стейт и запрос но уже вылазит ошибка

const [currency, setCurrency] = React.useState<Pokedex>({}); //ожидаю обьект с сервера 

 const fetchCurrency = async function () {
    try {
      const response = await axios.get<Pokedex>(url);
      setCurrency(response.data);
    } catch (e) {
      alert(e);
    }
  };

Ошибка при типизации стейта:

Argument of type '{}' is not assignable to parameter of type 'Pokedex | (() => Pokedex)'.

Можно исправить и написать так:

const [currency, setCurrency] = React.useState<Pokedex | any>({});

Но это уже костыли и хочется написать нормально.

Answer 1

[Станислав Макаров]

Если вы ожидаете объект с сервера, значит нужно уметь пожить какое-то время БЕЗ этого объекта? Этот объект вообще может не долететь до вас, что вы тогда будете делать?

Я думаю вам нужно работать не с Pokedex, а с Pokedex | null или чем-то в таком духе. Вам нужен maybe-тип в том или ином виде.

Comments

[Bart Simpson]

if (response) {
        setCoin(response.data);
      }

Спасибо за мысль, буду думать как реализовать, ранее не имел дела с <T>

[Кирилл Романов]

Нет, речь не об этом.
Речь о том, что пока ответ на запрос не пришёл, в стейте должны какие-то данные лежать. Сейчас у тебя это {}, который не подходит под тип Pokedex. Нужно использовать, например, тип Pokedex | null и в качестве исходного значения указать null

[Bart Simpson]

Кирилл Романов, к примеру

const [currency, setCurrency] = React.useState<Pokedex | null>({null});

Получаю ошибку:

Argument of type '{ null: any; }' is not assignable to parameter of type 'Pokedex | (() => Pokedex | null) | null'.
Object literal may only specify known properties, and 'null' does not exist in type 'Pokedex | (() => Pokedex | null)'

[Кирилл Романов]

а что такое {null}?

[Bart Simpson]

Кирилл Романов, это моя невнимательность)

const [currency, setCurrency] = React.useState<ICoin | null>(null);

Получаю ошибку, данные с сервера не приходят

Object is possibly 'null'

[Кирилл Романов]

ошибка в каком месте?

[Станислав Макаров]

Object is possibly 'null'

Bart Simpson Это ошибка от TypeScript, причём тут то, что данные с сервера не приходят? Вы где-то не обработали случай, когда у вас null в переменной.

[Bart Simpson]

Кирилл Романов, Станислав Макаров, я в интерфейсе сделал некоторые поля необязательными и ошибка ушла, не знаю насколько это валидно так делать но это помогло.