vue3中组件ref的ts类型问题?

在vue3的组件中使用ref时ts定义组件的类型如下:
const pageContentRef = ref<InstanceType<typeof PageContent>>(),然后中某个函数中我需要传递这个pageContentRef作为为参数,目前我定义参数类型为function demo(pageContentRef: Ref<InstanceType<typeof PageContent>>){...},但是在传值过去ts报类型错误,不太明白,哪里的问题。错误信息:Argument of type 'Ref<({ $: ComponentInternalInstance; $data: {}; $props: Partial<{ tableConfig: TableRenderType; searchWords: Record<string, any>; }> & Omit<...>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & ... 5 more ... & { ...; }) | undefined>' is not assignable to parameter of type 'Ref<{ $: ComponentInternalInstance; $data: {}; $props: Partial<{ tableConfig: TableRenderType; searchWords: Record<string, any>; }> & Omit<...>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & ... 5 more ... & { ...; }>'.
Type '({ $: ComponentInternalInstance; $data: {}; $props: Partial<{ tableConfig: TableRenderType; searchWords: Record<string, any>; }> & Omit<...>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & ... 5 more ... & { ...; }) | undefined' is not assignable to type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{ tableConfig: TableRenderType; searchWords: Record<string, any>; }> & Omit<...>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & ... 5 more ... & { ...; }'.
仔细对比了下,一个多了Ref,不知道问题在哪?代码运行没问题,就报ts类型错误

阅读 8.1k
2 个回答
新手上路,请多包涵

试了下,可以通过如下方式定义类型

const pcRef = ref<InstanceType<typeof PageContent>>()
type pageContentRefType = typeof pcRef
新手上路,请多包涵

官网的写法

<script setup lang="ts">
import MyModal from './MyModal.vue'

const modal = ref<InstanceType<typeof MyModal> | null>(null)

const openModal = () => {
  modal.value?.open()
}
</script>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题