皆さんは Hyperapp V2 を使っていて「タイプセーフにしたいな」と思ったことはありますか？
私はあります。なのでタイプセーフなHyperTSAppを作りました。
2019/04/03 追記: npmライブラリ化しました→Typerapp
編集履歴
- 2019/01/04 型チェックが完全になっていない欠陥を追記
HyperTSApp？
おいおいHyperTSAppって何だよ？Hyperappの型定義書けばいいじゃん？と思ったそこのあなた！是非、型定義を書いてください。...上手く書けたのであれば、この記事はスルーしましょう。
私はHyperappの型定義に挑戦しましたが、（私の技量では）完全なタイプセーフを実現することはできませんでした。HyperappはJavaScriptで書かれており、柔軟な書き方ができるようになっています。柔軟なのは良いことなのですが、この柔軟性を型定義で表し、かつ、タイプセーフにしようとすると...頭がおかしくなって死にます。私は死にかけました。なのでHyperappがタイプセーフになるように改変したHyperTSAppを作ろうと思い至りました。
Hyperappの型定義が辛いポイント
Actionのパラメーターの省略とdataの存在
Actionのシグネチャはこうなっています。
(state[, props], data) => newState
これを見るとpropsが省略できるんだなと読み取れると思います。シンプルですね。これをTypeScriptで表現するとこんな感じでしょうか。
type Action<S, P, D> =
((state: S, data: D) => S)
| ((state: S, props: P, data: D) => S)
第2引数のpropsが省略できるので二つに分かれました。次にpropsを省略したActionを作ってみましょう。
const X: Action<{ a: number }, undefined, Event> = (state, data) => state
このコードを書くと、TypeScriptのコンパイラーがこんなことを言ってきます。
パラメーター 'state' の型は暗黙的に 'any' になります。
パラメーター 'data' の型は暗黙的に 'any' になります。
stateとdataはanyになりましたとさ。めでたしめでたし。
Actionの呼び出し(dispatch)が隠ぺいされている
HyperappではActionの呼び出しにdispatch関数を使用しています。このdispatch関数、EffectとSubscriptionを定義するときぐらいにしか直接触れることができません。
例えば、buttonのclickでActionを呼び出すコードを書くと次のようになります。
<button onClick={[ActionName, { param: hoge }]} />
このコードは、Hyperappが内部でbutton.onclickイベントをリッスンしてdispatchの呼び出しに変換してくれます。疑似的に書くとこんな感じ。
onclick={ev => dispatch([ActionName, { param: hoge }], ev)}
これをタイプセーフにする型定義を書くのはかなり骨が折れます。Reactの型定義のようなものをHyperapp用に自作する必要が出てくるでしょう。回避策としては次のような関数を定義します。（Actionだけになっていますが、Hyperappはタプルでstateやeffectを使用できるのでもっと複雑になります）
function act<S, P, D>(action: [Action<S, P, D>, P]) {
return action
}
<button onClick={act([ActionName, { param: hoge }])} />
これで型チェックはされるようになりますが、しょっちゅう書き忘れたりしてダメダメです。ぶっちゃけ面倒。
Actionのdataは本質的にany
Actionのdata引数は呼び出し元によって何が入るのか変わるので本質的にanyです。上記の通り、dispatchが隠ぺいされているのでタイプセーフにするのは本当に難しいです。
絶対タイプセーフにするマンとしてはanyは死を意味します。つまりdata引数は死んでいます。
HyperTSApp
リポジトリ
上記リポジトリをnpm iしてnpm run startでparcelが動きサンプルを実行します。
Action
HyperappのActionからdataを削除し、stateとparamsの2つのみに変更します。
export type Action<S, P = undefined> = (state: S, params: P) => S | [S, EffectObjectBase[]?]
Effect/Subscription
定義されたEffect/Subscriptionから厳密に型指定されたActionを生成したかったので、Effetc/Subscriptionはクラスに変更しました。
一定時間後にActionを実行するEffectは次のように定義します。
const Delay = new Effect<{ interval: number }, { startTime: string }>((props, dispatch) => {
const startTime = Date()
setTimeout(() => dispatch(props.action, { ...props.params, startTime }), props.interval)
}, (props, runner) => ({
effect: runner,
...props,
}))
Effectクラスの型引数に、Effectを生成するときに使用するパラメーターの型(Props)と、Actionを実行するときに合成するパラメーターの型(ReturnProps)を指定します。またコンストラクターに、Effect Runnerと、Effect Constructorを指定します。
定義されたEffectからActionをcreateActionメソッドで生成します。
const OnDelayed = Delay.createAction<State, { amount: number }>((state, params) => ({
...state,
value: state.value + params.amount,
text: params.startTime,
}))
createActionメソッドの型引数はActionの型引数と同様に機能しますが、paramsの型はReturnPropsと合成され、{ amount: number } & { startTime: string }という型になります。これはHyperappのdata引数の代替になります。
ActionからEffectを呼び出すときはcreateメソッドを使用します。
const DelayAdd: Action<State, { interval: number, amount: number }> = (state, params) => [
state,
[Delay.create({ action: OnDelayed, params: { amount: params.amount }, interval: params.interval })]
]
init
app関数で渡すinitはパラメーターのないActionになります。
app({
init: () => initState,
})
view
app関数で渡すviewはstateとdispatchを引数にもつ関数になります。Actionはdispatch関数を直接使用して呼び出します。見た目はHyperapp V1に近いです。
app({
view: (state, dispatch) => (
<div>
<button onClick={ev => dispatch(Increment)}>increment</button>
<button onClick={ev => dispatch(Add, { amount: 10 })}>add10</button>
<button onClick={ev => dispatch(DelayAdd, { interval: 1000, amount: 50 })}>delayAdd</button>
<p>value: {state.value}</p>
<p>text: {state.text}</p>
</div>
),
})
更なるタイプセーフ
HyperTSAppのリポジトリではbutton.onClickなどを型チェックするために、Reactの型定義をフォークしてHyperTSApp用のHTML周りの型定義を追加しています(Html.d.ts)。
見様見真似で書いているので不備がある可能性が高いです。
おわりに
簡単なアプリではかなりタイプセーフになっていると思います。ちょっとでも入力ミスがあればTSCに怒ってもらえます。型安全万歳
こういった改変が思い付きでできちゃう規模なのがHyperappのすごいところだと思います。すっごいミニマム。
あとはモジュール機能が欲しいですね。これが意外と難しい。Hyperappの方は外部ライブラリで提供するみたいですけど...
追記：型チェックが完全でない重大な欠陥
TypeScriptの仕様みたいなんですが、Actionでstateに存在しないプロパティを書いてもエラーにならないようです。
type Action<S> = (state: S) => S
const a: Action<{ a: number }> = state => ({ ...state, xxx: 1 })
xxxというプロパティはstateに存在しないはずですが、エラーになりません。
ジェネリクスを使用しないシンプルな例。
type F = () => ({ a: number })
const f: F = () => ({ a: 1, xxx: 1 })
変数の代入でもワンクッション置くとエラーにならなくなるという仕様があるのが原因と思われます。
type X = { a: number }
const x: X = { a: 1, xxx: 1 } // エラー：型 '{ a: number; xxx: number; }' を型 'X' に割り当てることはできません。
const temp = { a: 1, xxx: 1 }
const x2: X = temp // エラーなし
どうしたらいいんですかね...？