Vuex/Typescript mappers issue: property does not exist on type 'CombinedVueInstance<Vue, ...>'

[mzymta]

Version

3.0.1

Reproduction link

https://github.com/mzymta/vuex-mappers-issue

Steps to reproduce

Add mapped methods using mapMutations, mapActions, create another component method that uses any of the mapped methods. Build fails with error:

Error: Property NAME_OF_MAPPED_METHOD does not exist on type 'CombinedVueInstance<Vue, ...>'

The below code works fine if there is no methodThatUsesActionOrMutation() method.
With methodThatUsesActionOrMutation() method build fails with error:

TS2339: Property 'pushStringArray' does not exist on type 'CombinedVueInstance<Vue, {}, { methodThatUsesActionOrMutation(): void; }, { newStr: any; getLongS...'.

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

export default Vue.extend({
  computed: {
    ...mapGetters({
      getStringsArray: 'getStringsArray'
    }),
    newStr: {
      get(): string {
        return this.$store.state.newStr;
      },
      set(value: string) {
        this.$store.commit('setNewStr', value);
      }
    }
  },
  methods: {
    ...mapMutations({
      pushStringArray: 'pushStringArray'
    }),
    ...mapActions({
      pushStringArrayAsync: 'pushStringArrayAsync'
    }),
    methodThatUsesActionOrMutation() {
      // HERE COMES THE ERROR
      this.pushStringArray();
      console.log('done');
    }
  }
}

What is expected?

mapped method pushStringArray() can be used in other component methods - build doesn't fail

What is actually happening?

Build fails with error:
TS2339: Property 'pushStringArray' does not exist on type 'CombinedVueInstance<Vue, {}, { methodThatUsesActionOrMutation(): void; }, { newStr: any; }, Reado...'.

[ktsn]

Duplicate of #1119
Fix is going on #1121

[sknightq]

I donot know yet~ And I have got a seem problem, but not Typescript, just a normal Vuex project with vscode, the red errors only appear in template tags...

Me too!

[pikax]

@JWong1105 vscode uses the typescript typings from the dependencies when using javascript

[1316636084]

how to fix it

[lihaowu]

昨天VSCode大批量更新，去掉报错的办法，File->Proferences->Extensions->Vetur->Validation:Template , Cancel it.

[Aslantoe]

reload一下Vetur好了

[floait]

reload the plugin Vetur, opening the new world!!!!!!

[satouriko]

Any update here? I've facing the same issue.

[DanielRuf]

We still face this issue, even with the latest version / release.

[DanielRuf]

We use mapGetters.

[xesjkeee]

I still face this issue using mapMutations

[SanyaShevchuk]

still face this problem with mapState, mapMutations etc. It can be reproduced if we have our component's computed/methods and vuex such as:

computed: {
  myProperty() {
     return true
  },
  ...mapState('someModule', ['someStateField'])
}

[kiaking]

@SanyaShevchuk Could you try annotating the other properties? (Computed methods require return value annotation).

computed: {
  myProperty(): boolean { // <- Here
     return true
  },
  ...mapState('someModule', ['someStateField'])
}

[pablo-iwg]

The above fixed the issue for me. @kiaking thank you!

[SanyaShevchuk]

yes I tried, it works for mapState and mapGetters, but does not for mapMutations. Ive added return type to methods as u did for computed, but still get an error

[SanyaShevchuk]

@pablo-iwg did u have a case with mutations or only computed?

[pablo-iwg]

I was using getters within a computed property and forgot to annotate the property. I was not using mutations.

[SanyaShevchuk]

Ive added types for everything but method from mapMutations still gets me error

export default Vue.extend({
  name: 'LogInPage',
  data() {
    return {
      loading: false as boolean,
      loginErrors: {} as ILoginErrors,
      email: '' as string,
      password: '' as string,
    };
  },
  computed: {
    errorMessage(): string {
      return 'errorMessage';
    },
  },
  mounted(): void {
    this.resetState();
  },
  methods: {
    ...mapMutations('someModule', ['resetState']),
    async onSignIn(): Promise<any> {
      this.loading = true;
      this.loginErrors = {};

      try {
        await signIn({
          username: this.email,
          password: this.password,
        });
      } catch (e) {
        console.log(e)
      } finally {
        this.loading = false;
      }
    },
    hasError(): boolean {
      return true;
    },
  },
});

[jQrgen]

+1

[Smilebags]

I'm also only experiencing this with mapMutations, all getters and method return values are typed.

[blaskovicz]

Is there currently an open issue for this? I'm still seeing this for ...mapState()

[fbnlsr]

Just chiming in that I also get this issue, but only when mapState() is present alongside others methods:

computed: {
      ...mapState(['user']),
      acquereurName(): string {
        return this.item.acquereur?.formName ?? ''
      },
    },

Here I get Property 'user' does not exist on type 'Property 'user' does not exist on type 'CombinedVueInstance<Vue, { minPosition: number; busy: boolean; itemData: RequisitionItem; rubriques: never[]; stockStatuses: { label: string; value: string; color: string; textColor: string; }[]; ... 30 more ...; showRegroupModal: boolean; }, { ...; }, { ...; }, Readonly<...>>'.Vetur(2339)

But if my component only has this:

computed: {
     ...mapState(['user']),
  },

...then there are no errors to report.