useStateでの型定義

javascript flow 技術

tl;dr

flowでuseStateで定義したstateに型をつけるにはこう書けばOKです

// @flow

const [name, setName] = useState('');
(name: string)

Reactでhooks使って書きたいよね

Reactのversionが16.8以降ならHooksを使って書くことができますね

reactjs.org

React初心者からするとuseStateでstateを扱えるのはかなり直感的にかけていいなって思ってます

const [name, setName] = useState('');

return (
    <div>
        <input
            id="name_form"
            type="text"
            value={name}
            onChange={event => setName(event.target.name)}
        />
    </div>
)

みたいな感じです

型はつけたいよね

僕はあんまり型の恩恵を受けたことがないので素晴らしさがよくわからないんですが jsは実際に動かすまでエラーがわからないのでflowで型をつけたほうがいいですよね (多分そうなんだろう)

useStateでflowを使うにはこんな感じにします

// @flow

const [name, setName] = useState('');
(name: string)

reactやflowのdocumentには見つけられなかったんですがstackoverflowにありました https://stackoverflow.com/questions/55977991/how-to-do-flow-type-annotations-for-react-hooks-usestate-etc

ちなみにこんな風にも書けます

// @flow

const [name, setName] = useState<string>('');

リンク先はTypeScriptについての記事ですがflowも同様にできます

https://levelup.gitconnected.com/usetypescript-a-complete-guide-to-react-hooks-and-typescript-db1858d1fb9c

後者の方が１行にまとまっててみやすいですね