Conditional Types I/O - Speaker Deck

Slide 1

Slide 1 text

Conditional Types I/O Roppongi.js #5

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

The Redux Action world 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 + 1 } default: return state } }

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Doubt to Reducer ■ Action 選定 / State 変更の責務が混在している…？ ■ Action は最初から複・Reducer の関心事なのか…？ ■ Action を除くとどうなる…？

Slide 7

Slide 7 text

The State world const initialState = { count: 0 } function increment(state = initialState) { return { ...state, count: state.count + 1 } } State を軸足に置くRedux。

Slide 8

Slide 8 text

The State world const initialState = { count: 0 } function increment(state = initialState) { return { ...state, count: state.count + 1 } } function setCount(state = initialState, { amount }) { return { ...state, count: amount } } State を軸足に置くRedux。 State 変更の責務のみが残る。

Slide 9

Slide 9 text

The State world const initialState = { count: 0 } function increment(state = initialState) { return { ...state, count: state.count + 1 } } function setCount(state = initialState, { amount }) { return { ...state, count: amount } } export const Mutations = { increment, setCount } State を軸足に置くRedux。 Action は Mutation から「生成する」

Slide 10

Slide 10 text

redux-aggregate

Slide 11

Slide 11 text

createAggregate() import { createAggregate } from 'redux-aggregate' import { Mutations } from './models/counter' const { types, // Generated ActionTypes creators, // Generated ActionCreators reducerFactory // Generated ReducerFactory } = createAggregate(Mutations, 'counter/') 状態変更関数 (Mutaion) MapObject から Redux の定型句を生成。 Action の初期コンテキストは狭い。Action / Reducer 密結合スタート。

Slide 12

Slide 12 text

createActions() import { createActions } from 'redux-aggregate' import { ActionSources } from './actions/timer' const { types, // Generated ActionTypes creators // Generated ActionCreators } = createActions(ActionSources, 'timer/') 純関数（ActionSrc）MapObject から Actions を生成。 Aggregate が抱えるには不自然な Action は Actions に委譲。 Action / Reducer 分割定義の余地を。

Slide 13

Slide 13 text

redux-aggregate pros ■ 開発速度の向上 ■ Action 選定 / State 変更の責務に境界が生まれる ■ テストが容易・可読性の向上 ■ many-to-many の余地もある詳細は redux-aggregate.js.org で

Slide 14

Slide 14 text

The State world const initialState = { count: 0 } function increment(state = initialState) { return { ...state, count: state.count + 1 } } 何はともあれ、これだけで3種の定型句が生成されるので開発効率が良い。型との相性も良さそうに見えるが…

Slide 15

Slide 15 text

型も一緒に生成

Slide 16

Slide 16 text

createAggregate() function setCount(state: State, payload: { amount: number }) { // Infer Src A return { ...state, count: payload.amount } }

Slide 17

Slide 17 text

Slide 18

Slide 18 text

createAggregate() function setCount(state: State, payload: { amount: number }) { // Infer Src A return { ...state, count: payload.amount } } const { creators } = createAggregate({ setCount }, 'counter/') const { type, payload } = creators.setCount({ amount: 10 }) // Inferred Dist A

Slide 19

Slide 19 text

Slide 20

Slide 20 text

型がマッピングされている

Slide 21

Slide 21 text

createActions() function tick({ message }: { message: string }) { // Infer Src A return { date: new Date(), message } // Infer Src B }

Slide 22

Slide 22 text

createActions() function tick({ message }: { message: string }) { // Infer Src A return { date: new Date(), message } // Infer Src B } const { creators } = createActions({ tick }, 'timer/')

Slide 23

Slide 23 text

Slide 24

Slide 24 text

createActions() function tick({ message }: { message: string }) { // Infer Src A return { date: new Date(), message } // Infer Src B } const { creators } = createActions({ tick }, 'timer/') const { type, payload } = creators.tick({ message: 'hello' }) // Inferred Dist A { type: "timer/tick", payload: { date: XXXX, message: "hello" } }: { type: string, payload: { date: Date, message: string } // Inferred Dist B }

Slide 25

Slide 25 text

開発時の型定義は inline assertion のみ

Slide 26

Slide 26 text

※ これ以降の話はライブラリ利用時意識する必要はないです。裏側の話。

Slide 27

Slide 27 text

Conditional Types I/O

Slide 28

Slide 28 text

Bottom up Generics ■ Generics による型定義も各々の責務を明瞭に ■ ボトムアップで要件を定義していく ■ 同じ定義でも使い所によって振る舞いが変わる以降は同一 mutation 関数を指す

Slide 29

Slide 29 text

Return type type R = INPUT extends (...arg:[]) => infer OUTPUT ? OUTPUT : never // javascript 翻訳 function _R(input = () => {}) { return input() } 戻り型を抽出する型

Slide 30

Slide 30 text

Argument type type A1 = INPUT extends (a1: infer OUTPUT) => any ? OUTPUT : never type A2 = INPUT extends (a1: any, a2: infer OUTPUT) => any ? OUTPUT : never // javascript 翻訳 function _A1 (input = a1 => a1) { return input() } function _A2 (input = (a1, a2) => a2) { return input() } n番目引数型を抽出する型

Slide 31

Slide 31 text

Expected type type NoPayload = (state: A1) => A1 type WithPayload = (state: A1, payload: A2) => A1 type ExpectedType = NoPayload | WithPayload // javascript 翻訳 function _ExpectedType(state, payload) { if (payload === undefined) return { ...state } return { ...state, payload } } 第1引数型 / 戻り型の同一性を要求。INPUT期待型

Slide 32

Slide 32 text

Cast type type NoPayload = () => { type: string } type WithPayload = (payload: A2) => { type: string, paylod: A2 } type CastType = NoPayload | WithPayload // javascript 翻訳 function _CastType(input) { const a2 = _A2(input) 　if (a2 === undefined) return () => ({ type: 'string' }) return (payload = a2) => ({ type: 'string', payload }) } 抽出した部分型を合成。OUTPUT振付型

Slide 33

Slide 33 text

Assert type type AssertType = INPUT extends ExpectedType 　　　　　　　　　　　　　　 ? CastType 　　　　　　　　　　　　　　 : never // javascript 翻訳 function _AssertType(input) { if (input <= _ExpectedType(input)) { // 意訳 return _CastType(input) } } INPUT期待型ならば OUTPUT振付型を返す。宣言型

Slide 34

Slide 34 text

Assert by Generics function foo(input) { return _AssertType(input) as AssertType // Assertion } foo 関数に与えた input 関数が型制約を満たしている場合、型が振付けられた関数が return される。プログラマブルに型が導出できる。

Slide 35

Slide 35 text

Mapped types & readonly wrap type AssertMap = { readonly [K in keyof T]: AssertType } Mapped types & Lookup types で Assert type 仕上げ。 redux-aggregate の Mutations から生成される ActionCreators の型はこうして生まれる。

Slide 36

Slide 36 text

Conditional Types I/O 要約

Slide 37

Slide 37 text

Conditional Types を活用した Auto mixed subtyping by Generics （合成派生型の自動導出）テクニック

Slide 38

Slide 38 text

ライブラリ提供関数に hook しているので、利用者は敷居高めの型定義を気にせず開発に集中出来る。

Slide 39

Slide 39 text

Appendix

Slide 40

Slide 40 text

Optional wrap breaks KeysDiff ... type SubscribeActionsMap = { [K in keyof T & keyof M]?: SubscribeActions } 2つの MapObject を与えると、同名関数に呼応する機能がある。Optional wrap をすると、2者間の関数名 Diff が拾えない。

Slide 41

Slide 41 text

KeysDiff type alias type KeysDiff< T extends string | number | symbol, U extends string | number | symbol > = ({ [P in T]: P } & { [P in U]: never } & { [x: string]: never })[T] 2者間の KeysDIff を抽出して、 Diff がなければ never に倒す型

Slide 42

Slide 42 text

Bool by KeysDiff type alias type HasKeysDiff = KeysDiff extends never ? false : KeysDiff extends never ? false : true KeysDiff の有無を真偽値で返す型

Slide 43

Slide 43 text

Optional wrap & Typo guard type SubscribeActionsMap = HasKeysDiff extends false ? { [K in keyof T & keyof M]?: SubscribeActions } : never Optional wrap 適用前に KeysDiff でタイポチェックする。

Slide 44

Slide 44 text

String literal type as TypeError type SubscribeActionsMap = HasKeysDiff extends false ? { [K in keyof T & keyof M]?: SubscribeActions } : 'SUBSCRIPTIONS_KEY_NOT_MATCH' 単純に never に倒すと undefined型になり、どこが型違反しているのか分かりづらい。 String literal type な Error message を仕込むと利用者に優しい。