Vue中为FormCheckbox组件Ref标注类型触发TS2344错误求助

错误原因 #

你遇到的TS2344错误，本质是InstanceType<typeof FormCheckbox>的用法不符合类型约束。FormCheckbox是Vue选项式组件的配置对象，并非可实例化的构造函数，而InstanceType仅能作用于构造函数类型（即符合new (...args: any[]) => any签名的类型），因此类型检查不通过。

解决方案 #

这里提供两种可行的修复方式：

方案1：为选项式组件生成构造函数类型（推荐） #

修改FormCheckbox组件的导出方式，用Vue.extend()包装选项配置，使其返回一个构造函数类型：

<script>
import Vue from 'vue';
import spacingMixin from "../mixins/spacing.js";

export default Vue.extend({
  name: "FormCheckbox",
  mixins: [spacingMixin],
  inheritAttrs: false,
  props: {
    id: {
      type: String,
      required: true
    },
    label: {
      type: String,
      default: ""
    },
    checked: {
      type: Boolean
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ["update:checked"],
  computed: {
    fieldAttributes() {
      const { ...attrs } = this.$attrs;
      delete attrs['class']
      return attrs;
    }
  }
});
</script>

之后在TestComp里，原来的InstanceType<typeof FormCheckbox>标注就能正常工作，TS不会再报错，你也能正常访问组件实例的$el属性。

方案2：使用Vue内置的组件实例类型 #

如果不想修改FormCheckbox组件的代码，可以直接使用Vue提供的ComponentPublicInstance类型来标注Ref：

<template>
<FormCheckbox id="SelectAll" ref="selectAllCheckbox"/>
</template>
<script setup lang="ts">
import { ref, Ref, ComponentPublicInstance } from 'vue';
import FormCheckbox from './path/to/FormCheckbox.vue';

const checkbox: Ref<ComponentPublicInstance | null> = ref(null);
</script>

如果需要更精确的类型（比如包含组件的props、computed等），可以结合组件的props类型：

type FormCheckboxProps = typeof FormCheckbox['props'];
const checkbox: Ref<ComponentPublicInstance<FormCheckboxProps> | null> = ref(null);

内容的提问来源于stack exchange，提问作者Dennis M.