typescript - Vue和 typescript : How to avoid TS error when accessing child component's methods

Question

我创建了一个基于类的自定义vue组件，并尝试从父组件访问其方法和/或计算的属性。 Vue文档中有一个示例，该示例解释了我正在尝试做的事情(https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements)。所以基本上就是这个

class ParentComponent extends Vue {
    someMethod() {
        (this.$refs.myChildRef as ChildComponent).focus()
    }
}

class ChildComponent extends Vue {
    focus() {
        // do something
    }
}

现在，这会导致TS错误:
“TS2339:属性“焦点”在类型“Vue”上不存在”

因此，很明显， typescript 看不到我的ChildComponent还有其他方法。

该代码在运行时仍然可以正常运行，因此似乎只是一个 typescript 问题。

有谁知道如何解决这个问题？

Answer 1

选项1:忽略它

//@ts-ignore

选项2:输入任意

const child: any = this.$refs.myChildRef;
child.focus();

选项3:界面，如@LLai所述

interface ComponentInterface {
    focus: () => void
}

选项4:合并类型
作为@LaLai所说的一个类轮

(this.$refs.myChildRef as ChildComponent & { focus: () => void }).focus()

或者如果您更需要它

Class ParentComponent extends Vue {
    $refs: Vue["$refs"] & {
      myChildRef: { focus: () => void }
    };  
}

选项5:@Ref()中的 vue-property-decorator装饰器

Class ParentComponent extends Vue {
  @Ref()
  childComponent: ChildComponent
}