TypeScriptでuseStateに型をつけるべき理由

はじめに

React × TypeScriptでSupabaseのデータを扱っているとき、
コード補完が出ずに困った 経験はありませんか？

実はこれ、TypeScriptが「型情報のない変数は中身が何でもOK」と判断してしまうため、プロパティ補完が効かなくなっているのが原因です。

問題

const [spots, setSpots] = useState([]);

この書き方だと、TypeScriptは
spots を「中身が何でもOKな any[]」と判断してしまう。
そのため、spot. と打ってもプロパティ候補が出ない。

解決法

type Spot = {
  id: number;
  name: string;
  wifi: boolean;
  power: boolean;
  voice: boolean;
};

const [spots, setSpots] = useState<Spot[]>([]);

→ spot. と打つと補完が出て、
コードの書き間違いも防げるようになった

まとめ

useStateに型をつけるだけで、
補完が効く＆安全にデータを扱えるようになる。