React Hooks のstateとuseStateの型のエラーを直したい。

Question

npx create-react-app my-app --typescriptで作成したアプリでHooksを利用しています。

const [state, setState] = useState(false);

コードに対してVScodeが上記画像のように型を推論してくれたので、stateとsetStateに下記のように型を付与しました。

const [state, setState]: [
boolean,
React.Dispatch<React.SetStateAction<boolean>>
] = useState(false);

しかし、下記のエラーが表示されました。

型 '[false, Dispatch<SetStateAction<false>>]' を型 '[boolean, Dispatch<SetStateAction<boolean>>]' に割り当てることはできません。

型 'Dispatch<SetStateAction<false>>' を型 'Dispatch<SetStateAction<boolean>>' に割り当てることはできません。
型 'SetStateAction<boolean>' を型 'SetStateAction<false>' に割り当てることはできません。
型 'true' を型 'SetStateAction<false>' に割り当てることはできません。

上記エラーを直す方法をご教示いただけないでしょうか。

試したこと

setStateを子コンポーネントに渡し、子コンポーネントのpropsをtypeで定義した場合、React.Dispatch<React.SetStateAction<boolean>>を設定してもエラーが出ませんでした。
ただし親コンポーネントでの型定義は上記の通りエラーが出ます。

また、codesandboxでサンプルを作成しエラーが出た型と同じ型を付与したところ、エラーが出ませんでした。

サンプル

追記 useStateの型

VScode

CodeSandbox

Comments

[maisumakun]

「型を推論してくれた」のであれば、わざわざ手動で型を振る必要もないかと思うのですが、する理由はありますでしょうか。

[mmaeda]

useState の型は全く同じでしょうか？

[MajinBoo]

maisumakun様 TypeScriptの勉強のために、型をできるだけ明示したいと考えているからです。また、boolean以外のstate及びsetStateはVScodeが示すを型を付与してもエラーにならない点と、VScodeとcodesandboxで挙動の差異の要因を知りたいと思い質問した次第です。

[MajinBoo]

mmaeda様 VScodeのuseStateの型とCodeSandboxのuseStateの型が全く同じか、ということでしょうか。確認したところVScodeではbooleanとなっている部分がCodeSandboxではfalseになっていました。画像を追記しましたのでよろしければご確認ください。

[mmaeda]

CodeSandbox の template で、<false> を使っているのがよくわかりませんが、どちらかを合わせることはできないでしょうか？ もしかしたら、CodeSanbox のバグかも。

[MajinBoo]

VScodeでuseState<boolean>()と書いたところ、エラーが無くなり一応質問文が解決したので自己解決しておきます。また、VSCodeとCodeSandboxの挙動の差異を私自身のアンサーにまとめておきますので、よろしければご確認ください。

Answer 1

useStateにbooleanジェネリクスを付与することでエラーが解決できました。

const [state, setState]: [
boolean,
React.Dispatch<React.SetStateAction<boolean>>
] = useState<boolean>(false);

また、サンプルを作る過程で使用したCodeSandboxとVScodeの挙動に差異があったため、下記にまとめます。

VSCodeの挙動

• ジェネリクスを付与しない場合

型 '[false, Dispatch<SetStateAction<false>>]' を型 '[boolean, Dispatch<SetStateAction<boolean>>]' に割り当てることはできません。

型 'Dispatch<SetStateAction<false>>' を型 'Dispatch<SetStateAction<boolean>>' に割り当てることはできません。
型 'SetStateAction<boolean>' を型 'SetStateAction<false>' に割り当てることはできません。
型 'true' を型 'SetStateAction<false>' に割り当てることはできません。

• useStaet<boolean>にした場合

エラー表示されず

• useState<false>にした場合

ジェネリクスを付与しない場合と同じエラーが表示

##CodeSandboxの挙動

• ジェネリクスを付与しない場合

エラー表示されず

• useStaet<boolean>にした場合

エラー表示されず

• useState<false>にした場合

エラー表示されず