Inferred Types for Flux

Slide 1

Slide 1 text

Inferred Types for Flux - 推論型武装 2018 -

Slide 2

Slide 2 text

自己紹介 - @Takepepe / Takefumi.Yoshii / DeNA DEG - 状態管理全般の話題が好き - 最近は TypeScript に夢中

Slide 3

Slide 3 text

Flux の脆さと型武装

Slide 4

Slide 4 text

Flux はいとも簡単に壊れる View / middleware の各所は State / Payload へ強依存している。規模が大きくなるにつれ依存が分散し、リリース後、それは予測不能に陥る。

Slide 5

Slide 5 text

Flux はいとも簡単に壊れる State / Payload スキーマをリファクタ。影響範囲考慮から漏れた View で NaN が表示される… dispatch が空振りする…

Slide 6

Slide 6 text

テストで整合性担保？整合性担保テストは属人的になりがち。型の導入で影響範囲の考慮漏れを削減、安心してリファクタが出来る。

Slide 7

Slide 7 text

テストの守備範囲が減る型で守れない規約は仕様・要件の場合が多く、必要なテストに集中できる。型とテストのバランスを見極める。 ※ 閾値による条件分岐 / e2e など ※

Slide 8

Slide 8 text

型武装は手動 or 推論？型定義は面倒なことが多い。 import & 手動キャストは消耗の元。指定次第で、最悪の場合エンバグする。 ※ エラー回避の any 潰し・期待型強制キャストなど ※

Slide 9

Slide 9 text

型武装は手動 or 推論？そこで、関数導出の推論型に頼る。推論型はキャスト不要で型が付き、必要な型定義・指定だけが残りやすい。

Slide 10

Slide 10 text

型システムの進化 TypeScript / Flow の推論器は日々進化。型が苦手だったライブラリも、今後の型システム機能追加で変貌する可能性がある。

Slide 11

Slide 11 text

話は変わって…

Slide 12

Slide 12 text

状態管理ライブラリ各位への想い

Slide 13

Slide 13 text

Vuex が好き型都合で普段は React を使っている。でも Vuex や MobX ぐらいの「DX」が好き。 Redux は面倒なことが多いと思う。 Redux 嫌 -> Vuex 型NG -> ??? な人いそう ※ DX （Developer Experience = 開発者体験） ※

Slide 14

Slide 14 text

コミュニティ・エコシステムは尊い。 Vuex の良いところだけを輸入し、 Redux で型強・爆速開発したい。 …こんなお気持ちのもとに作りましたでも Redux で頑張る ※ サードパーティが型定義で足を引っ張ることがある ※

Slide 15

Slide 15 text

redux-aggregate npm i redux-aggregate

Slide 16

Slide 16 text

Redux の DX helper middleware ではないです DX (Developer Experience = 開発者体験)

Slide 17

Slide 17 text

そもそも Redux の何が辛いのか

Slide 18

Slide 18 text

Redux で +1 const initialState = { count: 0 } const types = { INCREMENT: 'COUNTER_INCREMENT' } const increment = () => ({ type: types.INCREMENT }) function reducer(state = initialState, action) { switch (action.type) { case types.INCREMENT: return { ...state, count: state.count++ } default: return state } } Redux DX の悪さ

Slide 19

Slide 19 text

Vuex で +1 const state = { count: 0 } const mutations = { increment (state) { state.count++ } } Vuex DX の良さ

Slide 20

Slide 20 text

redux-aggregate で +1 const state = { count: 0 } const mutations = { increment (state) { return { ...state, count: state.count++ } } } 輸入する Vuex DX の良さ

Slide 21

Slide 21 text

クリーン・FP な状態管理状態を受けとり、変更した状態を返す「mutation関数」状態変更に必要な関数は、本来これだけ。もはや Redux 関係ないほどの純関数。

Slide 22

Slide 22 text

Don't commit Boilerplate. mutation 関数名を起点に Reduxに必要なボイラープレートを生成。 src コードはいたって単純。

Slide 23

Slide 23 text

Don't commit Boilerplate. ボイラープレート同士の整合性は自動生成により担保される。この時、mutation 関数が規約を満たしているかも検査。 ※ State を受け取り State を返すという規約 ※

Slide 24

Slide 24 text

DX は合格。でも型が… 生成された ActionCreator は Payload型を都度 import して手動キャストするしかなかった。そして 2018年3月…

Slide 25

Slide 25 text

TypeScript 2.8 革命

Slide 26

Slide 26 text

Type inference in conditional type ConditionalType は型推論の三項演算子。 Generics が型要件を満たしていれば、指定の型を返す。強力なのが ConditionalType で型キャプチャを取る「infer」

Slide 27

Slide 27 text

mutation 第2引数型（開発者が書くところ） function setCount (state: State, amount: number): State { return { ...state, count: amount } }

Slide 28

Slide 28 text

ActionCreator 第1引数型にマッピング（自動生成） function setCount (payload: number): { type: string, payload: number } { return { type: 'counter/setCount', payload } }

Slide 29

Slide 29 text

type A1 = T extends (a1: infer I, ...rest: any[]) => any ? I : never type A2 = T extends (a1: any, a2: infer I, ...rest: any[]) => any ? I : never type MT = (state: A1) => A1 type MTPL = (state: A1, payload: A2) => A1 type CR = () => { type: string } type CRPL = (payload: A2) => { type: string; payload: A2 } type Mutation = MT | MTPL type Creator = T extends MT ? CR : CRPL 推論マッピング型（redux-aggregate 抜粋）

Slide 30

Slide 30 text

type A1 = T extends (a1: infer I, ...rest: any[]) => any ? I : never type A2 = T extends (a1: any, a2: infer I, ...rest: any[]) => any ? I : never type MT = (state: A1) => A1 type MTPL = (state: A1, payload: A2) => A1 type CR = () => { type: string } type CRPL = (payload: A2) => { type: string; payload: A2 } type Mutation = MT | MTPL // 入力型を制限する type Creator = T extends MT ? CR : CRPL // 出力型のアサーションに利用推論マッピング型（redux-aggregate 抜粋）

Slide 31

Slide 31 text

全てに推論型が回る関数一発で型付き Boilerplate が生成

Slide 32

Slide 32 text

DEMO State / Payload を壊して危機を知る https://github.com/takefumi-yoshii/redux-aggregate-example

Slide 33

Slide 33 text

型定義・キャストは最小限。型付けは完璧に。新たに mutation 関数を追加すれば、 ActionType / ActionCreator は自動で追加。 mutation 関数の Payload スキーマを変更すると、末端の View までエラーが行き渡る。 ※1. Mapped types & Lookup types / ※2. Type inference in conditional types ※2 ※1

Slide 34

Slide 34 text

テストで担保してたところ…

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

それ、2018年現在型で全担保できるよ

Slide 37

Slide 37 text

DX の追求 = 必要なコードが残る

Slide 38

Slide 38 text

推論型 = 必要なキャストが残る

Slide 39

Slide 39 text

型強い = 必要なテストが残る

Slide 40

Slide 40 text

必要なものだけ書こう redux-aggregate　　

Slide 41

Slide 41 text

Thanks !

Slide 42

Slide 42 text

Flux 型武装ということで

Slide 43

Slide 43 text

Vuex 版もあります

Slide 44

Slide 44 text

npm i vuex-aggregate Vuex の Payload を推論型で守る vuex-aggregate で map系ヘルパーも守る