Vue2+Vuex3+TypeScript项目中如何为组件内this.$store添加正确类型支持

你遇到的核心问题是Vue2和Vue3的类型声明体系不兼容——你参考的指南是针对Vue3的，用了Vue3专属的@vue/runtime-core模块，但Vue2的类型扩展需要适配自己的类型系统。下面是针对Vue2生态的完整解决方案：

1. 完善Store的类型定义并导出类型 #

先更新src/store/index.ts，确保给Store传入明确的State泛型，并导出Store的类型供全局声明使用：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

// 定义根State的具体类型
interface RootState {
  message: string;
}

const state: RootState = {
  message: "olleH",
};

// 导出Store的类型，后续全局声明会用到
export type RootStore = Vuex.Store<RootState>;

// 给Vuex.Store显式传入RootState泛型
export const store = new Vuex.Store<RootState>({
  state,
  mutations: {},
  actions: {},
  modules: {},
});

2. 修改shims-vue.d.ts适配Vue2的类型扩展 #

Vue2的全局属性扩展需要在vue/types/vue模块中进行，替换掉你之前用的Vue3模块。更新后的文件如下：

import Vue from "vue";
import type { RootStore } from "./store";

// 保留原有的.vue文件类型声明
declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

// 扩展Vue实例的$store属性类型
declare module "vue/types/vue" {
  interface Vue {
    $store: RootStore;
  }
}

3. 验证类型提示 #

现在回到Vue组件中，当你输入this.$store.state.时，VSCode应该会自动弹出message属性的提示，并且类型会被正确识别为string。

为什么之前的配置无效？ #

你之前用的@vue/runtime-core是Vue3的核心类型模块，Vue2的类型检查器完全不会识别这个模块的声明。Vue2的类型系统是基于vue/types/vue来扩展Vue实例属性的，这是两个版本生态的关键差异。

额外：Vuex模块的类型适配（可选） #

如果后续你的项目添加了Vuex子模块，只需要在RootState中包含模块的State类型即可：

// 定义子模块的State类型
interface UserState {
  username: string;
}

// 根State包含子模块的State
interface RootState {
  message: string;
  user: UserState; // 对应modules中的user模块
}

这样this.$store.state.user.username也会获得正确的类型提示。

内容的提问来源于stack exchange，提问作者cefn