New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vuex の Getters の型定義 #2
Comments
ご丁寧な再現状況をもってご指摘頂き、ありがとうございました。 本サンプルでは、Store の構成要素として state 以外はオプショナルではないのか?
getters に定義された関数は、store として instantiate されたのち、 これはちょうど、
解決方法
import { Mutations, Actions, RootState, RootGetters } from 'vuex'
import { S, G, M, A } from './type'
// ______________________________________________________
//
export const getters = {
todosCount(
state: S,
getters: G,
rootState: RootState,
rootgetters: RootGetters
) {
return state.todos.length
},
doneCount(state: S) {
return state.todos.filter(todo => todo.done).length
}
}
getters.doneCount({todos:[]}) // No Error |
なるほど、下記あたりですね。 https://github.com/vuejs/vuex/blob/91f3e69ed9e290cf91f8885c6d5ae2c97fa7ab81/src/store.js#L461-L468 store._wrappedGetters[type] = function wrappedGetter(store) {
return rawGetter(
local.state, // local state
local.getters, // local getters
store.state, // root state
store.getters // root getters
)
}
そうか、たしかに。
うんうん、頭が整理されました!
納得です!!回答ありがとうございました!!! |
解決したようでなによりです!これにて close とさせて頂きます。 |
素晴らしいサンプルをありがとうございます!
Vuex の Getters の型について意図したとおりに型推論されないケースがありましたので質問させてください。
知りたいこと
この 2つを両立させるために Getters の型定義をどう書くべきか知りたい。
以下、このリポジトリのコードを題材にして、説明させてください。
Step 1
まず
/types/vuex/type.ts
の Getters の型についてts-nuxtjs-express/types/vuex/type.ts
Lines 6 to 13 in a4d461c
ゲッターの引数として、state 以外はオプショナルなので、これは誤りなのではないかと考えました。正しくは下記かと。
下記のテストコード(jest)を書いて検証してみましたが、これは TypeScript の型チェックエラーによってこけます。
Step 2
しかしながら、Getters の型を下記のように修正した後では、
今度はゲッターの中で getters を使うコードが TypeScript の型チェックエラーになります。
まとめ
というわけで、
を両立させるには、どのように型を定義するのがよいか分からず、質問するに至りました。
お忙しいところ恐縮ですが、ご確認のほどよろしくお願いします。
再現手順
https://github.com/inouetakuya/ts-nuxtjs-express/tree/ts-errors-example で確認してみました
ファイル差分が見られる PR: Vuex の Getters の型チェックエラーの例 by inouetakuya · Pull Request #1 · inouetakuya/ts-nuxtjs-express
takuya/ts-nuxtjs-express/types/vuex/type.ts
The text was updated successfully, but these errors were encountered: