Vue3/Vuex4中this.$store已类型化但getters未类型化问题咨询

这种情况的核心原因在于TypeScript全局类型合并的推断限制，以及自定义Store类型的定义方式，具体拆解如下：

1. 全局类型扩展的推断局限性 #

你在shims-vue.d.ts中给ComponentCustomProperties扩展$store为ThStore类型时，TypeScript对全局接口的类型合并存在上下文推断延迟。Vue的ComponentCustomProperties是一个全局接口，当TS解析这个扩展时，可能没有完全递归解析ThStore内部getters的具体类型，而是 fallback 到了Vuex默认的Store<any>中getters的any类型。

而当你显式用this.$store as ThStore断言时，是直接强制TS将当前值的类型指向完整定义的ThStore，绕过了全局接口合并时的推断限制，因此getters的具体类型能被正确识别。

2. ThStore类型定义的潜在问题 #

如果你的ThStore定义没有正确关联Vuex Store的泛型参数，也会导致这个问题：

• 错误示例：如果ThStore只是简单基于Store<any>扩展，Store<any>的getters本身就是any类型，全局扩展时TS只会识别到这个基础类型：

  // 错误的定义方式
  import { Store } from 'vuex'
  type ThStore = Store<any> & { /* 自定义属性 */ }
  

• 正确示例：ThStore应该基于你的RootState和RootGetters泛型参数来定义，确保Vuex能自动推断getters的具体类型：

  // 正确的定义方式
  import { Store } from 'vuex'
  import type { RootState, RootGetters } from '@/store'
  
  type ThStore = Store<RootState> & {
    // 自定义扩展属性（如果需要）
  }
  

3. 类型声明的加载顺序影响 #

如果shims-vue.d.ts中导入ThStore的语句晚于Vue或Vuex的类型声明导入，可能导致TS在合并ComponentCustomProperties时，先使用了Vuex默认的Store<any>类型，而非你的自定义ThStore，最终造成getters类型为any。

解决建议 #

• 确保ThStore正确继承Vuex的Store并传入正确的RootState泛型参数（Vuex会自动关联对应的getters类型）；
• 在shims-vue.d.ts中，先导入ThStore再扩展ComponentCustomProperties，代码结构如下：

  import type { ComponentCustomProperties } from 'vue'
  import type { ThStore } from '@/store'
  
  declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
      $store: ThStore
    }
  }
  

• 若仍有问题，可以在ThStore中显式指定getters类型：

  type ThStore = Store<RootState> & {
    getters: RootGetters
  }
  

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