Vue+TS项目中vue-class-component的mixins在WebStorm报错？

我之前也碰到过一模一样的情况——用vue-class-component写的Mixin在VSCode和Visual Studio里跑得好好的，到WebStorm就开始报错。先看你贴的代码片段，this.$stor...应该是没写完的笔误吧？先把它补全成this.$store.registerModule(key, module)，这是基础。不过即使修正了这个，WebStorm还是可能因为类型推断的问题报错，下面是几个亲测有效的解决办法：

• 手动声明$store的类型
  WebStorm对Vue实例上$store的类型推断有时候不如VSCode敏锐，咱们可以手动给Vue扩展类型：

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

// 给Vue的原型扩展$store的类型声明
declare module 'vue/types/vue' {
  interface Vue {
    $store: Store<any>;
  }
}

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

这样WebStorm就能准确识别this.$store的类型，不会再瞎报错了。

• 更新WebStorm和插件
  WebStorm对Vue和TypeScript的支持全靠插件撑着，旧版本的插件对vue-class-component的语法支持确实有漏洞。你可以：

  • 把WebStorm升级到最新稳定版
  • 打开Settings > Plugins，找到Vue.js和TypeScript插件，确保它们也是最新版本

• 调整TypeScript检查配置
  有时候WebStorm的严格检查会过度敏感，你可以试试：

  1. 打开Settings > Languages & Frameworks > TypeScript
  2. 把TypeScript version改成项目本地安装的版本（别用WebStorm内置的）
  3. 暂时降低检查级别，比如关闭Strict mode，看看报错会不会消失

• 清理WebStorm缓存
  缓存混乱也会导致各种奇怪的报错，这招屡试不爽：点击File > Invalidate Caches...，选择Invalidate and Restart，重启后很多类型推断的问题都会自动消失。

内容的提问来源于stack exchange，提问作者Clément Flodrops