Javascript 如何键入使用Vue.extend创建的Vue组件？

使用带有TypeScript的Vue，我使用Vue.extend创建了两个组件。现在我想通过this.$refs从另一个访问其中一个，但如果我不指定其类型，则无法通过IDE autocomplete访问其任何方法：

// ChildComponent.vue

export default Vue.extend({
  name: 'ChildComponent',
  methods: {
    test(): void { ... }
  }
}

// ParentComponent.vue

<template>
  <ChildComponent ref="child_ref" />
</template>

export default Vue.extend({
  name: 'ParentComponent',
  components: { ChildComponent }
  computed: {
    child(): InstanceType<typeof ChildComponent> { // This won't work 
      return this.$refs.child_ref as InstanceType<typeof ChildComponent>;
    }
  },
  methods: {
    triggerChildTest(): void {  
      this.child.test(); // IDE warning: Property 'test' does not exist on type 'CombinedVueInstance'.
    }
  }
}

//ChildComponent.vue
导出默认Vue.extend({
名称：'ChildComponent'，
方法：{
test（）：void{…}
}
}
//ParentComponent.vue
导出默认Vue.extend({
名称：“ParentComponent”，
组件：{ChildComponent}
计算：{
child（）：InstanceType{//这不起作用
将此.$refs.child\u ref作为InstanceType返回；
}
},
方法：{
triggerChildTest（）：void{
this.child.test（）；//IDE警告：类型“CombinedVueInstance”上不存在属性“test”。
}
}
}

是否有任何方法可以继续使用Vue.extend以允许我访问组件中的数据和方法？我是否可以在生成的组件上实现接口？

---

我更希望使用此方法保留代码库，而不是将所有内容迁移到使用Vue组件类。

我无法复制此问题。我只是在Vue CLI生成的项目中使用TypeScript尝试了您的代码。您可以链接到复制吗？我可以无误地运行代码，是IDE将方法调用标记为红色以警告它无法复制在我的$ref中找不到它。基本上，我找不到一种方法来键入由

this返回的实例。$refs.child\u ref

这样我将获得自动完成/IDE类型脚本插件将理解我正在使用的内容。是的，我无法在IDE中重现该问题（VS code）或者在构建中。如果这只发生在您的IDE中，我假设这是您的环境的本地配置问题。是的，我正在使用启用了TypeScript的JetBrains Rider。我假设是TypeScript检查触发了错误，因为它检查变量/方法是否存在于访问它们的变量中。谢谢谢谢你的关注！