Vue TypeScript调用子组件方法时Ref报错(Object is of type 'unknown')解决

这个错误是因为TypeScript无法推断出$refs.notification的具体类型，默认将其视为unknown，以下是几种可行的解决方式：

方式一：直接使用类型断言 #

在调用方法时，通过类型断言明确指定子组件实例的类型：

<notification ref="notification"></notification>
<button @click="handleClick"></button>

<script lang="ts">
export default {
  methods: {
    handleClick() {
      // 断言子组件包含show方法
      (this.$refs.notification as { show: () => void }).show()
    }
  }
}
</script>

方式二：定义子组件实例类型并复用 #

1. 先在子组件中导出自身的实例类型：

<!-- Notification.vue 子组件 -->
<script lang="ts">
export default {
  methods: {
    show() {
      console.log('working');
    }
  }
}

// 导出子组件的实例类型
export type NotificationInstance = InstanceType<typeof import('./Notification.vue').default>
</script>

2. 父组件中导入该类型并使用断言：

<!-- 父组件 -->
<notification ref="notification"></notification>
<button @click="handleClick"></button>

<script lang="ts">
import { NotificationInstance } from './Notification.vue'

export default {
  methods: {
    handleClick() {
      (this.$refs.notification as NotificationInstance).show()
    }
  }
}
</script>

方式三：扩展Vue的类型声明（Vue2适用） #

通过扩展Vue的类型，全局指定当前组件中$refs的类型：

<script lang="ts">
import Vue from 'vue'

// 声明当前组件中$refs的类型
declare module 'vue/types/vue' {
  interface Vue {
    $refs: {
      notification: { show: () => void }
    }
  }
}

export default {
  methods: {
    handleClick() {
      this.$refs.notification.show()
    }
  }
}
</script>

补充：Vue3 Composition API 场景 #

如果你的项目使用Vue3的<script setup>，可以直接声明ref的类型：

<script setup lang="ts">
import Notification from './Notification.vue'
import type { NotificationInstance } from './Notification.vue'
const notification = ref<NotificationInstance | null>(null)

const handleClick = () => {
  // 使用可选链避免null报错
  notification.value?.show()
}
</script>

<template>
  <notification ref="notification"></notification>
  <button @click="handleClick"></button>
</template>

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