Adding a getter in the vuex class, breaks type inference (intellisense)

[paulvanbladel]

When you have, a VuexModule without getters, intellisense is working fine (even in js files with the //@ts-check.

// @ts-check
import { VuexModule } from 'vuex-typed-modules'

export const testModule = new VuexModule({
  name: 'testModule',
  state: {
    count: 1,
    myProp: 'banana'
  },
  mutations: {
    addCount (state, number) {
      state.count += number
    }
  },
  actions: {
    increment (context, count) {
      testModule.mutations.addCount(count)
    }
  }
})

As you can see:

When you add now a getter, the type inference is completely broken.

[victorgarciaesgi]

Hi @paulvanbladel , thanks again for the feedback! I never tried with js I didn"t even know it worked :) Looking into it!

[victorgarciaesgi]

Do you have an exemple of your problem? I have no problem with having getters on my module, must me coming for the @ts-check option ? Try writing your files in TS instead :)

[paulvanbladel]

Sure, here is a demo of the problem: https://github.com/paulvanbladel/ItemsJs-Vue-Demo/blob/master/app/src/pages/store-demo.vue

try putting the getters in comment, you will see type inference works as expected. Comment them out, and type inference fails for the whole file.

[victorgarciaesgi]

The problem comes from your second getter, which triggers a loop in the infered types

testGetter2 () {
    return testModule.state.myProp
}

Either declare a const getters outside of the constructor, or refer to the state!

const getters = {
    testGetter2 () {
      return testModule.state.myProp
    }
}

[paulvanbladel]

Of course ! Thanks a lot Victor. You know, this is the only library which provides intellisense and type inference combined with ES 6 ! I prefer to start using typescript when there is more certainty about the Vue composition API (so Vue 3).

[victorgarciaesgi]

@paulvanbladel Thanks for your kinds words, that's why i created it in the first place, I wanted 0 boilerplate for typing Vuex! :)