Vue & Typescript：访问子组件方法时如何避免 TS 错误

Question

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

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

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

现在，这会导致 TS 错误：“TS2339：属性 'focus' 在类型 'Vue' 上不存在”

显然，打字稿没有看到我的 ChildComponent 有其他方法。

该代码在运行时仍然有效，所以它似乎只是一个打字稿问题。

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

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：来自vue-property-decorator @Ref()装饰器

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

Answer 2

一种解决方案是在您的子组件上实现一个接口。

interface ComponentInterface {
    focus: () => void
}

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

另一种选择是合并类型

class ParentComponent extends Vue {
    someMethod() {
        (this.$refs.myChildRef as ChildComponent & { focus: () => void }).focus()
    }
}

但是，如果您在子组件之外大量调用焦点，这可能会变得重复。 我更喜欢选项1。

Answer 3

我们使用 typescript 构建的组件也有类似的问题。 我们现在使用的解决方案只是在每个问题之前添加一个 ts-ignore 注释。 这不是最好的方法，但它有效。

//@ts-ignore

试试看

Answer 4

我不想两次声明方法名称，所以我使用这种方式：

在 ChildComponent.ts 中

import Vue from 'vue'

export default class ChildComponent extends Vue.extend({
    methods: {
        focus() {}
    }
}){}

在 ChildComponent.vue 中

<template>...</template>

<script lang="ts">
    import ChildComponent from './ChildComponent'

    export default ChildComponent;
</script>

在父组件中

import Vue from 'vue'

import ChildComponent from './ChildComponent.vue'
import ChildComponentClass from './ChildComponent'

export default class ParentComponent extends Vue.extend({
    components: {ChildComponent},
    methods: {
        someMethod() {
            (<ChildComponentsClass>this.$refs.child).focus();
        }
    }
}){}