Vite+Vue3+TS模板绑定事件报错：属性不存在于类型'{}'

问题根源 #

1. getCurrentInstance()返回的实例类型未正确断言，导致$message、$service的类型不明确，干扰组件上下文的类型推导；
2. 未对Vue全局注入的$message、$service做类型声明；
3. 原env.d.ts对.vue组件的定义过于宽泛，未结合<script setup>的自动类型推导能力。

具体解决方案 #

1. 修正getCurrentInstance的类型断言 #

修改组件中的<script setup>代码，明确实例类型并安全解构全局属性：

<script setup lang="ts">
import type { ComponentInternalInstance } from 'vue'

// 断言实例不为null，再解构proxy
const instance = getCurrentInstance() as ComponentInternalInstance
const { $message, $service } = instance.proxy!

const useServiceDemo = async () => {
  const result = await $service.test.getBaseData({})
  console.log('result', result)
}

const useMessageDemo = () => {
  $message({
    message: 'this is a success message.',
    type: 'success'
  })
}
</script>

2. 扩展Vue全局属性的类型声明 #

更新env.d.ts，为$message和自定义$service添加类型定义：

/// <reference types="vite/client" />

// 导入Element Plus的$message类型（如果使用Element Plus）
import type { ElMessage } from 'element-plus'

// 根据实际业务定义$service的类型
interface TestService {
  getBaseData(params: Record<string, unknown>): Promise<unknown>
}

interface CustomGlobalService {
  test: TestService
}

// 扩展Vue组件的自定义属性类型
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $message: typeof ElMessage
    $service: CustomGlobalService
  }
}

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, unknown>
  export default component
}

3. 优化tsconfig.json配置 #

调整TypeScript编译选项，提升类型检查准确性：

{
  "extends": "@tsconfig/node18/tsconfig.json",
  "include": ["env.d.ts", "src/**/*.ts", "src/**/*.vue", "./components.d.ts"],
  "exclude": ["node_modules"],
  "compilerOptions": {
    "noImplicitAny": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "bundler",
    "allowJs": true,
    "lib": ["esnext", "dom", "dom.iterable"],
    "types": ["element-plus/global"] // 若使用Element Plus，添加全局类型
  }
}

4. 安装必要的类型依赖 #

确保项目包含Vue和相关库的类型定义：

npm install -D @vue/runtime-core @types/node

完成以上步骤后，模板中绑定useServiceDemo、useMessageDemo的类型报错即可消除。

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