vue-class-component mixins在WebStorm中引发错误？

Question

我正在使用vue-js和TypeScript进行项目。所以我试试vue-class-component。

我正在尝试编写一个mixin，它在VSC和VS中运行良好，但似乎WebStorm对我的代码并不满意。

这是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);
    }
  }
}

以下是使用此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`);
    }
  }

根据vue-class-component，这应该有效。问题是WebStorm无法检查TypeScript类型。

有2个错误：

• 参数类型与参数不匹配
• 基础构造函数必须具有相同的返回类型

代码编译良好，其他IDE无法捕获这些错误。我尝试过使用不同版本的TS，目前我正在使用2.8.3。 Visual Studio Code使用与WebStorm相同的版本。

编辑：这是我的tsconfig.json，它可能很有用：）

{
  "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了解更新