Vue+TypeScript使用Vuex mapState报TS2571 unknown类型错误如何解决

报错原因 #

TS2571错误出现的核心原因是TypeScript无法正确识别你传入mapState的state类型，导致其被推导为unknown。

修复方案 #

• 第一步：先注入Vuex全局类型声明
  在项目src目录下新建shims-vuex.d.ts类型声明文件，给Vue实例注入全局的Store类型，避免每次调用mapState都手动处理类型：

import { Store } from 'vuex'
// 这里替换为你自己项目中定义根State类型的文件路径
import { State } from './store/type'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

• 第二步：修正mapState的调用写法
  你当前传入的第二个any泛型参数会干扰类型推导，直接删除即可，确保你导入的State是项目根State的正确类型：

computed: {
  ...mapState<State>({
    currentLanguage: (state): Language | null => state.currentLanguage
  })
},

如果临时需要快速解决，也可以直接对state做类型断言，这是兜底方案：

computed: {
  ...mapState({
    currentLanguage: (state: unknown) => (state as State).currentLanguage
  })
},

• 第三步：额外检查
  确认你的State、Language类型都已经正确导出，导入路径没有拼写错误。

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