Vue2+Composition API+TypeScript调用子组件方法类型报错问题咨询

问题根源 #

你遇到的问题本质上是两个错误叠加导致的：

1. 给ref标注的类型错误：typeof MyComponent是组件的构造函数类型，并非组件渲染后生成的实例类型，因此TS无法推导实例上挂载的validate方法。
2. 方法访问路径错误：Vue组件实例的methods是内部属性，对外暴露的方法会直接挂载在实例根节点上，因此访问.methods.validate运行时自然拿不到对应方法。

解决方案 #

只需要调整父组件中ref的类型标注，即可同时满足类型校验和运行时调用需求：

1. 修正父组件ref类型定义 #

将ref的泛型从typeof MyComponent改为InstanceType<typeof MyComponent>，后者才是组件实例的正确类型：

import { defineComponent, ref } from "@vue/composition-api";
import MyComponent from './MyComponent.vue';
export default defineComponent({
  components: {
    MyComponent,
  },
  setup() {
    // 这里修改泛型类型为组件实例类型
    const myComponentInst = ref<InstanceType<typeof MyComponent> | null>(null);
    return { myComponentInst };
  },
  methods: {
    submit() {
      // 直接调用实例上的validate方法即可，不需要加.methods
      const result = this.myComponentInst?.validate();
      // 后续校验逻辑
    }
  }
});

2. 可选优化（解决Vetur类型推导缺陷） #

如果Vetur依然报错，大概率是旧版Vetur对Vue2 Composition API的类型推导能力不足，可以通过显式导出子组件实例类型解决：
首先在子组件中补充导出实例类型：

// MyComponent.vue
import { defineComponent, ref } from "@vue/composition-api";

const MyComponent = defineComponent({
  methods: {
    validate() {
      let validationResult = { isValid: false };
      // [...validation logic]
      return validationResult;
    }
  }
});

// 补充导出实例类型
export type MyComponentInstance = InstanceType<typeof MyComponent>;
export default MyComponent;

之后在父组件中直接导入该类型标注ref即可：

import MyComponent, { MyComponentInstance } from './MyComponent.vue';

// setup中定义ref
const myComponentInst = ref<MyComponentInstance | null>(null);

3. 多表单组件批量校验扩展方案 #

如果你的项目中有多个表单组件都需要实现validate方法，可以统一抽离校验接口，批量处理时类型更规范：

// 全局定义统一的校验接口
interface FormValidateable {
  validate: () => { isValid: boolean }
}

// 标注ref类型时组合接口
const myComponentInst = ref<(Vue & FormValidateable) | null>(null);

内容的提问来源于stack exchange，提问作者Guy Passy