【React】TypeScriptを使用してReact Hooksを書く

CODE

こんにちは、カツヒロです。

この頃は、もっぱらJS系、中でもReact関連の勉強にハマっています。今回は、Reactと相性が良いと言われているTypeScriptとReact Hooksの書き方について記事を書きたいと思います。

TypeScriptで型概念を追加することで、エラーが起こりにくく安全性の高いコードを書くことが可能になります。TypeScriptは、JSの後継として今後のデフォルト言語になる可能性が高いので、この機会ぜひ覚えることをオススメします。

Reactで型を使うのが初めてだったり、Hooksの機能にまだ自信がなくても理解できると思いますので、ぜひ読んでみてください。


useStateをTSを使用して書く

useStateはHooksのもっとも基本的な機能です。かつてはクラス型コンポーネントに限定されていたstateでの状態管理を、関数型コンポーネントでも使用可能にしました。

そんなuseStateフックをTypeScriptで書くと下記のようなものになります。(下記の例では、かんたんなリストコンポーネントを作成しています。)

 

基本的な型の宣言は、Interface型で書きます。下記のコードは、itemsの初期値を設定するタイミングとリスト表示する際のアイテムの描画時に使用しています。

 

useState<型>(初期値)」とすることで、useStateの初期値を設定します。

関数型コンポーネントの宣言時には「React.FC」という型が使用可能です。これは「Functional Component」の略で、短縮して「FC」と宣言できます。引数の型には「JSX.Element」を指定し、その名の通り「JSX要素」にアノテーションする型です。

宣言していない型を使用した場合は、エラーとなるので気をつけましょう。

 

useContextをTSを使用して書く

useContextは、Providerから渡された値を使用するフックです。これを利用することで、Props Drilling問題(Propsのバケツリレー)を解決することができる画期的なものです。

そんなuseContextをTSで記述すると以下のようになります。(下記のコードでは、かんたんなボタンの表示を行っています。)

 

コンテキストを使用するために、まずは「createContext()」を行います。

<Partial<T>>は、オプショナルな値を設定する型宣言です。つまり、<T>の値がすべて揃っていなくてもエラーが起こりません。今回のコードでは、<IContext>に初期値が入っていない場合にはエラーが起こってしまうようです。

createContextを設定したら、Providerにvalueを設定します。コンテキストに設定されたvalueの値は、useContextを使用することで、子コンポーネントのどこでも利用可能です。

 

useReducerをTSを使用して書く

reducerの機能は、reduxやJSのreduce関数に詳しい方なら理解しやすいものかと思います。

 

useReducerの初期設定は下記です。

「useReducer(reducer, initialState)」のように、useReducerに作成したreducer関数と初期値を引数として渡します。すると、返し値として「[state, dispatch]」が返ってきます。

dispatch関数に、reducer関数のtypeを渡すと、設定していた機能が実行されます。

TypeScript + React Hooksのまとめ

上記で紹介したフック以外にも、React Hooksには便利なフックがたくさんありますが、基本的な機能を抑えるにはuseState、useContext、useReducerで十分だと思います。残りのフックは、実際にコードを書いていく中で覚えていきましょう。

TypeScriptで型概念を追加することで、エラーが起こりにくく安全性の高いコードを書くことが可能になります。TypeScriptは、JSの後継として今後のデフォルト言語になる可能性が高いので、この機会ぜひ覚えておきませんか?

 

TSの勉強には、下記のUdemy講座をオススメしています。型の概念とTypeScriptに付いて詳しく説明されているので、初心者の方やこれからTSにチャレンジしたい方にもオススメです。

今回のオススメコンテンツ

30日間の返金保証も付いているので、合わなかったらすぐに止めることも可能です。まずは、一歩踏み出すことから始めましょう!(購入する際は、たびたび開催される¥1200のセール時が良いですよ!!)


参考サイト

ReactのHooksを使ってReduxのTodoリストをReduxなしに書き換えたサンプル(TypeScript使用)