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

【问题标题】：How to fix TypeScript errors when using Vuex mapGetters?使用 Vuex mapGetters 时如何修复 TypeScript 错误？
【发布时间】：2018-07-07 02:32:02
【问题描述】：

使用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()。

【问题讨论】：

你可以使用假的this参数：minimizerIconClass(this: ComponentTypeHere)。（仅在编译时存在，在编译时被剥离）
ComponentTypeHere 的示例是什么？（抱歉，TypeScript 很新）
在这个具体的例子中可能只是{ navCollapsed: boolean }。（需要更多信息，不确定navCollapsed 来自哪里）
navCollapsed 正在被mapGetters() 注入。
@ffxsam 你找到解决这个问题的方法了吗？

标签： typescript vue.js vuex

【解决方案1】：

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

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

【讨论】：

【解决方案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 上使用（正确输入的）getter。

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

【讨论】：

你好，你能给出这个解决方案的完整实现吗？ TMethods、TComputed、TData 和 TProps 的定义我不明白。