vuex: Vuex/Typescript mappers issue: property does not exist on type 'CombinedVueInstance'

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…’.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 8
  • Comments: 22 (3 by maintainers)

Most upvoted comments

+1

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

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

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

We use mapGetters.

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

reload一下Vetur好了

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