vue.js - Hvordan fikse TypeScript-feil når du bruker Vuex mapGetters?

Når du bruker mapGetters, har ikke TypeScript synlighet i hvilke getters som blir bundet til Vue-komponenten, så det kaster feil. Eksempel:

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 roper om this.navCollapsed:

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

Hvordan fikser jeg dette? Den eneste omveien jeg kan komme på er å ikke bruke mapGetters().

Svar #1

Jeg sto overfor det samme problemet og gjorde følgende:

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

    export const mapGetters: TMapGetters;
}

Så i butikken min definerer jeg:

interface TGetters {
    navCollapsed: boolean;
}

Nå i komponenten min kan jeg gjøre:

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`;
        }
    }
}

Langt fra perfekt, men det vil oppdage skrivefeil i arrayen som sendes til mapGetters, og det vil tillate deg å bruke din (korrekt typede) getter på this.

Imidlertid vil ikke TypeScript vite om du faktisk har mappet getteren det gjelder eller ikke.

Svar #2

Jeg vil anbefale å bruke vuex-class for dekoratører med Typescript.

Men hvis du ikke vil ha den ekstra avhengigheten, tror jeg at bruk av this['navCollapsed'] i stedet for this.navCollapsed bør løse kompilasjonsfeilen.

Relaterte artikler