web-dev-qa-db-ja.com

Vuex mapGetters使用時のTypeScriptエラーを修正する方法

mapGettersを使用している場合、TypeScriptはVueコンポーネントにバインドされているゲッターを確認できないため、エラーをスローします。例：

_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()を使用しないことです。

typescriptvue.jsvuex
9
ffxsam

TypeScriptのデコレータには vuex-class を使用することをお勧めします。

しかし、追加の依存関係が必要ない場合は、this['navCollapsed'] の代わりに this.navCollapsedはコンパイルエラーを解決する必要があります。

5
AbM

私は同じ問題に直面し、次のことを行いました：

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では、問題のゲッターを実際にマップしたかどうかはわかりません。

1
MaximeW