TypeScriptでuseStateを使用する際に注意すべき型推論

TypeScriptを導入して、useStateを書く際には、stateの型が推論できるかに注意を払う必要があります。ありがちな問題として、外部APIにリクエストして、ユーザー情報を取得し、そのオブジェクトを入れる場合、初期値として渡せるような型を持つデータがない問題が起こります。

この場合は、型推論に頼らず、useStateに明示的に型引数を渡す必要があります。

const [user, setUser] = useState<User>()
const [article, setArticle] = useState<Article[]>([]);

初期値に明示的にnullを入れたい場合は、以下の通り

useState<User | null>(null)