如何在使用Vuex mapGetters时修复TypeScript错误？

Question

使用时mapGetters,TypeScript无法查看绑定到Vue组件的getter的内容,因此会抛出错误.例:

import Vue from 'vue';
import { mapActions, mapGetters } from 'vuex';

export default Vue.extend({
  computed: {
    ...mapGetters('ui', ['navCollapsed']),

    minimizerIconClass(): string {
      return `fa${this.navCollapsed ? '' : 'r'} fa-window-maximize`;
    },
  },

TypeScript大喊大叫this.navCollapsed:

TS2339: Property 'navCollapsed' does not exist on type 'CombinedVueInstance<Vue, {}, { openMobileMenu(): void; }, { minimizerIconClass: string; }, Readon...'.

我该如何解决？我能想到的唯一解决方法是不使用mapGetters().

Answer 1

我建议将 vuex-class用于带有Typescript的装饰器。

但是，如果您不希望额外的依赖关系，我相信使用this['navCollapsed']而不是this.navCollapsed应该可以解决编译错误。

Answer 2

我遇到了同样的问题并执行了以下操作：

declare module "vuex" {
    interface TMapGetters {
        <TGetters>(getterNames: Array<keyof TGetters>): Partial<TGetters>;
    }

    export const mapGetters: TMapGetters;
}

然后在我的商店中我定义：

interface TGetters {
    navCollapsed: boolean;
}

现在在我的组件中我可以这样做：

type TThis = TGetters & TData & TMethods & TComputed & TProps;

export default Vue.extend<TData, TMethods, TComputed, TProps>({
    computed: {
        ...mapGetters<TGetters>([
            'navCollapsed',
        ],
        minimizerIconClass(this: TThis): string {
            return `fa${this.navCollapsed ? '' : 'r'} fa-window-maximize`;
        }
    }
}

远非完美，但它会检测传递给的数组中的拼写错误mapGetters，并且允许您在this.

但是，TypeScript 不会知道您是否确实映射了相关的 getter。