Vuex mapGetters 사용 시 TypeScript 오류를 수정하는 방법

Vuex mapGetters 사용 시 TypeScript 오류를 수정하는 방법

사용시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().

Typescript가 있는 데코레이터는 vuex-class를 사용하는 것을 추천합니다.

하지만 추가 의존성을 원하지 않는다면this['navCollapsed']대신this.navCollapsed컴파일 오류를 해결합니다.

같은 문제에 직면하여 다음과 같이 처리했습니다.

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그러면 (유형) getter를 사용할 수 있습니다.this.

그러나 TypeScript는 실제로 문제의 getter를 매핑했는지 여부를 알 수 없습니다.

언급URL : https://stackoverflow.com/questions/48483591/how-to-fix-typescript-errors-when-using-vuex-mapgetters