vue3+ts使用defineExpose报TS:2339

开头先把错误贴上

src/hooks/usePageSearch.ts:9:27
TS2339: Property 'getPageData' does not exist on type '{ $:ComponentInternalInstance; $data: {}; $props: Partial<{}> & Pick<Readonly<ExtractPropTypes<{}>> & VNodeProps &AllowedComponentProps & ComponentCustomProps, "key" | ... 10 more ... | "style">; ... 10 more ...; $watch(source: string | Function, cb:Function, options?: WatchOptions<...> | undefined): WatchStopHan...'.
  >  9 |     pageContentRef.value?.getPageData({})

在这里解释一下错误,错误的原因是将导入的组件转换为类型后组件中没有对应的getPageData类型

经过测试这个错误只在vue-cli中出现,在新版本的vite中没有出现

解决办法是将getPageData的类型进行定义然后对导入的pageContent类型使用extends进行继承,具体代码如下

import { ref } from 'vue'
import PageContent from '@/components/page-content'
interface INewPageContent extends InstanceType<typeof PageContent> {
  getPageData(): void
}

const pageContentRef = ref<INewPageContent>()
pageContentRef.value?.getPageData()

组件中

<script setup lang="ts">
const getpageData=(){
  console.log('get the data here')  
}
defineExpose({
  getPageData
})
</script>

关于extends类型继承可以参考以下代码

 interface Animal {
    eat: boolean;
  }
  interface Bird extends Animal {
    fly: boolean;
  }
  interface Fish extends Animal {
    swim: boolean;
  }

  let bird = <Bird>{};
  bird.eat = true;
  bird.fly = true;
  // bird.swim --> error: Property 'swim' does not exist on type 'Bird'

至此问题解决 🎉 如有错误欢迎指正

个人网站随缘更新 欢迎来访