【React × Typescript】useStateでオブジェクト型の型指定をする方法

useStateでオブジェクト型指定する方法

Reactで{number: 0, title: "", image_url: ""}というオブジェクト型レスポンスがあるAPIを叩き、これを
useStateで型指定して取得したい場合、、、

1.まずinterfacetypeで扱うプロパティでオブジェクト型をつくる（例：HogeObject）
※interfaceは拡張機能として、名前の型(interface)定義が複数ある時に自動的に一つの定義にマージしてくれるDeclaration merging機能があるがたまたまグローバルに定義されている型と同じ名前をつけてしまい拡張してしまうこともあり、この観点からすると型が弱くなる気がするので、今のところ通常のアプリ開発であればtype一択かな

hoge.tsx

type HogeObject = {
  number: number;
  title: string;
  image_url: number;
}
..

2.作ったオブジェクト型をuseStateの引数に渡して「初期値」と共に定義

hoge.tsx

..
const [hogeItems, setHogeItems] = useState<HogeObject>({number: 0, title: "", image_url: ""});

3.取得したオブジェクトに欲しい値のプロパティを渡してデータをrender

hoge.tsx

  return (
      <ContentsCards
        cardContentsPath1={"/hoge/1/project/" + hogeItems.number}
        cardImageUrl1={hogeItems.image_url}
        cardTitle1={hogeItems.title}
        cardName1="hoge"

以上です