React19で変化したuseReducerの型から学ぶTypeScriptの型推論

Transcript

1. React19で変化した useReducerの型から学ぶ TypeScriptの型推論
2. 自己紹介 k8o（koki sakano） 株式会社ドワンゴ/教育事業本部/Webフロントセクション このスライドは副業として開発に参加しているIrusiruを利用して作成しました！ TypeScriptとReactを業務と趣味の両方で愛用している https://github.com/k35o https://qiita.com/KokiSakano https://zenn.dev/kokisakano https://k8o.me @k35o53k
3. 引数 ・状態の更新方法を指定するreducer関数 ・初期値を決める関数・値 useReducerとは？ 🛠useReducerは状態を管理するReactの機能の⼀種 返り値 ・状態 ・状態を更新するための関数 状態を特定の方法でのみ更新させるときに使う 右の例では状態を年齢の増減以外で更新できない
4. 配列のreduce関数 useReducerと配列のreduce関数 配列に実装されるreduce関数 ・多くの値を一つにまとめるもの ・コールバック関数は これまでの結果と現在の要素を次の結果にする関数 実際にuseReducerは配列のreduce関数にちなんで名付けられている useReducer ・継続的に生じるアクションを一つの状態にまとめる ・reducer関数は これまでのStateとアクションを次のStateにする関数
5. React18とReact19の型の変化 React 18 React 19 細かすぎてよくわからないが、明らかにコード量が減った！ @types/reactの19.0.4時点のコードを抽出したものです。namespaceは気にしないで下さい。
6. React18のuseReducer 😅React18のuseReducerで困るところ インラインでreducer関数を定義したとき 引数の状態に型を付与しないと、型エラーが発生する🤯
7. React18のuseReducer 🔍React18のuseReducerの型 reducer関数を主軸に、そこから各箇所の型を推論している！ reducer関数 Reducer<S, A> 状態 ReducerState<R> その他
8. React19のuseReducer React18で困ったところ、React19ではどうだろう🤔 インラインでreducer関数を定義したとき 引数の状態に型を付与しなくても、状態の型を推論してくれる🎉
9. React19のuseReducer 🔍React19のuseReducerの特徴 reducer関数からだけではなく、初期値からも状態の型を推論している！ reducer関数 (S, A) => A 状態 S その他 アクション A
10. React18からReact19の推論の変化 React18とReact19では状態の推論方法が変更された React 18: reducer関数からのみ状態を推論 React 19: reducer関数と初期値から状態を推論 状態の型を初期値からも推論させたい インラインで状態の型を定義しないreducer関数で型安全な宣言が可能に‼
11. React18とReact19のuseReducerで学ぶ型推論 React18式：主体となる型があり、それから従属する型を推論させる方法 React19式：値の主従関係を決めずに基本的な型から型を推論させる方法 汎用性はReact19式の方が高いが、React18式が活きる場面もある React 18式 React 19式 主体となる型から型を生成する 基本型から必要な型を生成する 主役の型 基本型A 基本型B その他1 その他2 その他3 基本型A 基本型B その他1 その他2 その他3
12. React18式の型推論が有効なパターン React 18式 主役の型があり、それを元に型推論させる 例: 関数の部分適用を行う関数 部分適用: f(x, y, z) =>g(3)(y, z) ・主役は適用元の関数f ・適用先の値xは関数fを元に決定 上記の関数が持つ性質と同じように 値xの型も関数fの型によって定まるようになった！
13. まとめ ・React19のバージョンアップに合わせてuseReducerの型の大工事が行われた ・React18ではreducer関数に型情報がないと状態の型を推論できない ・React19ではreducer関数に型情報がなくても初期値から推論できる ・React18のような型定義は主体となる型とそれに従属する型があるときに有効 ・React19のような型定義はそれ以外のパターンで汎用的に利用できる ・普段利用するライブラリで定義された型から学ぶことは多い 身近で複雑な機能の型を実装して、実際の型を確認して遊ぶとためになる