键入 Vuex 方法风格的 Getter

Question

I'm trying to understand how I can properly type a Vuex Method-Style getter . Here's aFiddle , and the code:

interface IData {
    name: string;
}

type IGetters = {
    data(getters: IGetters): IData;
    getDataByKey: (getters: IGetters) => (name: string) => string;
    getName(getters: IGetters): string;
}

const getters: IGetters = {
    data(getters) {
        return {
            name: 'Hello'
        };
    },
    getDataByKey: (getters) => (name) => {
        return getters.data[name as keyof typeof getters.data];
    },
    getName(getters) {
        return getters.getDataByKey('name');
    }
}

The issue I'm having is getName . When invoking getDataByKey , TS throws TS-2345 Argument of type 'string' is not assignable to parameter of type 'IGetters'. To me, it seems like it thinks I need to call the function that has (getters) as the params, but that's not how this works in Vuex.

I saw this SO answer , and I tried to implement what was done, but it didn't work, so I'm pretty sure I didn't implement it properly. Does anyone have any suggestions?

Answer 1

It looks like per Vuex's definition of a getter ( export type Getter<S, R> = (state: S, getters: any, rootState: R, rootGetters: any) => any; ), they use any to get around this issue, which isn't ideal, but it's at least an answer. My IGetters definition would turn into:

type IGetters = {
  data(state: State, getters: any): IData;
  getDataByKey: (state: State, getters: any) => (name: string) => string;
  getName(state: State, getters: any): string;
};