В чём ошибка типизации typescript?

Question

[ArturMavlidov]

type Category = {
  id: number,
  name: string,
  products: number[]
}

type Items = {
  [key: string]: any[]
}

export interface IGoods {
  categories: Category[];
  items: Items;
}

const App: React.FC = () => {
  const [goods, setGoods] = useState<IGoods | object>({});

  useEffect(() => {
    fetch("https://delivery-f1999-default-rtdb.firebaseio.com/goods.json")
      .then((data) => data.json())
      .then((data) => setGoods(data))
  }, [])

  return (
    <>
      <Categories categories={goods.categories}/>
    </>
  );
};

Пытаюсь в компонент Categories передать категории, но ошибка - Property 'categories' does not exist on type 'object | IGoods'

Comments

[WbICHA]

IGoods | object

Тебя ничего в этом типе не смущает?

[ArturMavlidov]

WbICHA, А что должно?

[Aetae]

В object нет categories и у тебя нет проверки, что там именно IGoods, а не object.

Можно сделать так: useState({} as IGoods);, но таким образом ты посылаешь нахрен typescript и открываешь дорогу ошибкам. Лучше не надо.

Подход с null, описанный Александр - единственно верный.
Ну или можно упростить до useState<IGoods>(); без лишних телодвижений, и тогда в state у тебя будет IGoods | undefined.

Answer 1

[Александр]

Скорее лучше использовать useState<T | null>(null), т.к. в таком случае можно легко проверить значение в условном рендеринге. А если Вы объявите в вашем компоненте нечто вроде React.FC<{ data: T }>, то Object (точнее ничего, кроме T честным путём) не сможете внутрь прокинуть.

https://codesandbox.io/s/qna-q-1135320-6iz66s