`direct-vuex` 在定义 Getter 时出错：“函数隐式返回类型为 'any'...”答案

【问题标题】：`direct-vuex` has error when defining Getters: "Function implicitly has return type 'any'..."`direct-vuex` 在定义 Getter 时出错：“函数隐式返回类型为 'any'...”
【发布时间】：2023-03-28 12:59:01
【问题描述】：

我正在使用direct-vuex 包来定义 Vuejs+Typescript 的存储。尝试定义 Getter 时出现此错误：

'userGetters' 隐式具有类型'any'，因为它没有类型注释，并且在其自己的 initializer.ts(7022) 中直接或间接引用

我可以从我的组件访问store.getters.canUpdateUsers，但getter 只执行一次，getters 的类型是 any。这是store.getters 的确切类型：

(property) getters: {
    [x: string]: any;
    user: {
        [x: string]: any;
    };
}

这是我模块的 getter 部分：

export const userGetters = defineGetters<UserState>()({
    canUpdateUsers(...args) {
        // const { state } = userGetterContext(args);
        const { state, getters, rootState, rootGetters } = mod1GetterContext(args)
        console.log(state);

        return (
            state.currentUser.role == "admin" ||
            state.currentUser.role == "presenter"
        );
    },
});
const mod1GetterContext = (args: [any, any, any, any]) => moduleGetterContext(args, userModule)

这是模块本身：

export const userModule = defineModule({
  state: {
    userList: [],
    currentUser: {},
  } as UserState,

  actions: userActions,
  mutations: userMutations,
  getters: userGetters,
});

我已经禁用了 no-use-before-define eslint 规则。好像和这个错误无关。

更新：

我在这个沙盒中重现了错误：

https://codesandbox.io/s/spring-dew-e5xrq?file=/src/store/modules/user/userGetters.ts

【问题讨论】：

标签： typescript vue.js vuex

【解决方案1】：

文档中提到，getter的返回类型在使用moduleGetterContext时要显式声明：

动作上下文中的类型意味着 TypeScript 应该永远不要从上下文中推断动作的返回类型行动。事实上，这种类型的输入是递归的，因为 context 包括动作的返回值。当这件事发生时， TypeScript 将整个上下文传递给 any。 Tl;博士;宣布退货存在的操作类型！

同理，每次使用moduleGetterContext生成的getter上下文时，声明getter的返回类型！

https://github.com/paroi-tech/direct-vuex#in-a-vuex-module

这是固定代码：

export const userGetters = defineGetters<UserState>()({

    // The boolean type is defined explicitly
    canUpdateUsers(...args):boolean {

        // ...
    }

【讨论】：