Vue3+TS报错：CreateComponentPublicInstance不存在currentUser属性

问题描述 #

开发中遇到类型报错："Property 'currentUser' does not exist on type 'CreateComponentPublicInstance<{}, {}, {}, {}, {},'"。尝试以下方案均未解决：

• 参考同类型问题解决方案无效
• 为currentUser标注:any（写法currentUser:any () {），错误依旧
• 导入defineComponent包裹组件配置，问题仍存在

报错截图 #

截图1 #

截图2 #

相关代码 #

初始组件代码 #

export default {
    computed: {
      currentUser() {
        return this.$store.state.auth.user
      },
      showAdminBoard() {
        if (this.currentUser && this.currentUser['roles']) {
          return this.currentUser['roles'].includes('ROLE_ADMIN')
        }

        return false
      },
      showModeratorBoard() {
        if (this.currentUser && this.currentUser['roles']) {
          return this.currentUser['roles'].includes('ROLE_MODERATOR')
        }

        return false
      },
    },
    methods: {
      logOut() {
        this.$store.dispatch('auth/logout')
        this.$router.push('/login')
      },
    },
  }

引入defineComponent后的代码 #

import { defineComponent } from 'vue'
export default defineComponent({
    components: { DarkMode },
    computed: {
      currentUser() {
        return this.$store.state.auth.user
      },
      showAdminBoard() {
        if (this.currentUser && this.currentUser['roles']) {
          return this.currentUser['roles'].includes('ROLE_ADMIN')
        }
        return false
      },
      showModeratorBoard() {
        if (this.currentUser && this.currentUser['roles']) {
          return this.currentUser['roles'].includes('ROLE_MODERATOR')
        }
        return false
      },
    },
    methods: {
      logOut() {
        this.$store.dispatch('auth/logout')
        this.$router.push('/login')
      },
    },
  })

可行解决方案 #

1. 定义Store状态类型并扩展Vue实例 #

TypeScript无法自动推导$store的状态结构，需手动定义类型并扩展Vue的全局属性：

// 定义用户和认证状态类型
interface User {
  roles: string[]
  // 补充其他用户属性
}

interface AuthState {
  user: User | null
}

interface RootState {
  auth: AuthState
}

// 扩展Vue组件实例类型，让this.$store能识别自定义状态
declare module 'vue' {
  interface ComponentCustomProperties {
    $store: import('vuex').Store<RootState>
  }
}

2. 为计算属性标注明确类型 #

直接给计算属性指定返回类型，帮助TS正确推导：

computed: {
  currentUser(): User | null {
    return this.$store.state.auth.user
  },
  showAdminBoard(): boolean {
    // 使用可选链简化判断
    return this.currentUser?.roles?.includes('ROLE_ADMIN') ?? false
  },
  showModeratorBoard(): boolean {
    return this.currentUser?.roles?.includes('ROLE_MODERATOR') ?? false
  },
}

3. 检查TS配置与依赖版本 #

确保tsconfig.json中compilerOptions.strict设为true（或至少开启strictNullChecks），同时Vue、vuex、@vue/runtime-core的版本保持一致，避免类型定义冲突。

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