useStateの型
useState は型を推測してくれる
TypeScript は、最初に入れた値から型を決めてくれます。
const [count, setCount] = useState(0);これで count は number になります。setCount("三") と書けば怒られます。ここまでは何も書かなくても効いています。
推測が効かないとき
困るのは、最初が空のときです。
const [items, setItems] = useState([]);空の配列からは中身の型が分かりません。TypeScript は never[]、つまり「何も入れられない配列」だと考えます。そのあと setItems(取得した商品) と書くと、入れられないと怒られます。
API から取ってきたデータを入れる箱は、たいてい空から始まります。fleama の商品一覧もそうです。だからここは自分で型を教えます。
山かっこで型を渡す
const [items, setItems] = useState<Item[]>([]);useState<Item[]> の山かっこが「この state には Item の配列が入る」という指定です。TypeScript入門で出てきたジェネリクスと同じ書き方です。
これで setItems に渡せるのは Item[] だけになり、items.map の中の1件も Item として扱われます。item.titel と打ち間違えれば、その場で分かります。
まだ無い状態を表す
もう一つよくあるのが「まだ選ばれていない」状態です。
const [selected, setSelected] = useState<Item | null>(null);Item | null は「Item か、または null」という意味です。詳細画面で使います。| null を書いておくと、selected.title と直接書いたときに「null かもしれないぞ」と止めてくれます。この止めが、実際のアプリでいちばん多いクラッシュを防ぎます。
演習
商品一覧の state に型を付けて、出品されている商品を並べます。