vuex.tsに出ているワーニングをすべて解決する（TypeScript）

[Hiroshiba]

内容

こんな感じでプルリクエストレビューの際にいつもwarningが表示されてしまうので、解決したいのですが、vuex.tsは型パズルも含まれているのでなかなか手を出せずにいます。 いい感じにwarningをなくしていきたいです。

ref

• https://github.com/Hiroshiba/voicevox/issues/53

Pros 良くなる点

Cons 悪くなる点

実現方法

VOICEVOXのバージョン

0.?.0

OSの種類/ディストリ/バージョン

その他

[y-chan]

364 でStoreの定義方法が変わったことに伴って、もう少しvuexの型ラッパー自体を改善できそうです。

Warningが出ないような定義方法を模索してみます。

[Hiroshiba]

ありがとうございます！！ とても助かります。

[Segu-g]

556 で書いた型パズルを少し書き直したものをここにも置いておきます．

型が循環参照しているので，遅延評価の都合上返り値の型を書かないとNoImplicitAnyのエラーがよく分からない場所に出たり出なかったりします．

typescriptlang.orgの実行環境

[Segu-g]

556 で書いた型パズルを少し書き直したものをここにも置いておきます． 型が循環参照しているので，遅延評価の都合上返り値の型を書かないとNoImplicitAnyのエラーがよく分からない場所に出たり出なかったりします．

typescriptlang.orgの実行環境

これで遊んでいて気づいたのですが，この型定義だとstore内のActionやGetterで渡ってくるDispatch, Commit, Gettersに型を付けるのは難しそうだと感じました．

dispatch, commit, getters等の ActionContext (injectee)引数に型を付けるにはStoreOptionsオブジェクトに指定された関数の引数(payload)，戻り値の型を用いる必要があります． これはtypescriptの型決定順序を考えた時，型を決定したい関数の型を型の評価前に使用していることになるため，それらはanyとして評価され，引数(payload)，返り値の型だけを取ってくることが出来ません．

一方，useStoreの型はStoreOptionsの型評価と交差していないので，storeの型を正しく付けることが出来ます．

Reduxでこれが問題にならないのは，reduxのdispatchはvuexでのcommitであり，dispatch(actionType(payload))としても返り値が必要ないからです． vuexでは，dispatchは返り値を持つので，dispathをdispatherの引数に渡すか型キャストしなければいけません．

const myDispatch = dispatch as MyDispatch;
// or
helper(dispatch, "action", payload);

[Hiroshiba]

どう考えても初心者歓迎タスクではないので外します 😇