ReactのuseStateでTypeScriptの型を複数指定する方法 useState();

 

例えば、文字列かnullが入ってくる可能性のある関数の返り値がある場合は、TypeScriptでuseStateを使うとエラーになります。

 

型 ‘string | null’ の引数を型 ‘SetStateAction<string>’ のパラメーターに割り当てることはできません。
型 ‘null’ を型 ‘SetStateAction<string>’ に割り当てることはできません。

 

みたいな感じです。こういう場合は、あらかじめコードベースで、nullかstringが入ってもいい変数を定義しなければいけない。

 

そうした方が、読者が混乱しない。読者が混乱しないために、TypeScriptが助けてくれる。

 

下記のように書くことができます。

 

const [currentUser, setCurrentUser] = useState<string | null>();
こういう風に書けば大丈夫です。
藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

JavaScriptReactTypeScript

コメントする

メールアドレスが公開されることはありません。