How to use with vue-class-component?

[NikitaKA]

I'm trying to do something like that:

import foo from 'store/modules/foo';

@Component({
  methods: foo.mapMutations(['bar', 'baz'])
})

But got an error: Argument types do not match parameters on mapMutations.

[ilajosmanov]

You should you spread operators

[NikitaKA]

@ilajosmanov
But in tests there are no spread operator:

const Test = Vue.extend({
  methods: foo.mapMutations(['inc']),
  render(h): any {
    return h('div')
  }
})

I've tried to use spread, but that didn't help

There are no errors thrown from compiler and mutations typings do not work too.

[NikitaKA]

I found that problem appears when that's done in .vue file. Everything works fine when doing same thing in regular .ts file... Is there any way to fix this?

[ktsn]

The example code should work properly. It does not matter whether you use spread operator or not.
If you provide self-contained reproduction, we would easily find the root cause of your problem.

[NikitaKA]

@ktsn
I have created simple project with Vue CLI for demonstration: https://github.com/NikitaKA/vuex-smart-module-bug (sorry if it's not).
Problem is not in spread operator, but in mapper and .vue file.

[ktsn]

• TypeScript does not infer this type of component from component options of decorator. So it is actually normal to produce error like setTest does not exist.
• If you want it to infer this type, you should use Vue.extend for mappers and inherit it.

import { Component, Vue } from 'vue-property-decorator';
import TestStore from './module';

const Super = Vue.extend({
  methods: TestStore.mapMutations(['setTest'])
})

@Component
export default class App extends Super {
  mounted() {
    this.setTest(true);
  }
}

[NikitaKA]

@ktsn I did right as you said, but it doesn't work. But it still works fine in a regular .ts file. I updated the project.

[ktsn]

That is likely your editor or build environment issue. It does not happen on my side with your reproduction. Please check whether the actual build process passes type check.

[NikitaKA]

Yes, you were right - there is error, types working. It seems that WebStorm can't recognize that... Sorry for bother you, thanks for help!

UPDATE
Jetbrains support recommended me to install 2019.1 EAP (which adding better Typescript support in .vue files) and all errors are gone!