vue类组件mixins在WebStorm中引发错误？

Question

I'm working on a project using vue-js and TypeScript. So I give vue-class-component a try.

I'm trying to code a mixin, it works well in VSC and VS but it seems that WebStorm is not really happy with my code.

Here is the mixin :

import Vue from 'vue'
import {StoreOptions} from 'vuex'
import Component from "vue-class-component";

@Component
export default class Container extends Vue {
  registerStoreModule(key: string, module: StoreOptions<any>): void {
    if (!this.$store.state[key]) {
      this.$store.registerModule(key, module);
    }
  }
}

And here is the component using this mixin :

  @Component({
    components: { UserCard },
    computed: mapGetters({ user: `${STORE_KEY}/user` })
  })
  export default class UserContainer extends mixins(Container) {
    user: UserState;

    created() {
      this.registerStoreModule(STORE_KEY, store)
    }

    mounted() {
      this.$store.dispatch(`${STORE_KEY}/getUser`);
    }
  }

According to vue-class-component , this should work. The thing is that WebStorm is failing at checking TypeScript types.

There are 2 errors :

• Argument types do not match parameters
• Base constructors must all have the same return type

The code compiles well and other IDEs don't catch those errors. I've tried with different versions of TS, currently I'm using 2.8.3. Visual Studio Code uses the same version as WebStorm.

EDIT: Here is my tsconfig.json, it can be useful :)

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "node",
      "mocha",
      "chai"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.vue",
    "tests/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

Answer 1

已知问题，请按照WEB-31543进行更新