在Vue中键入Component Ref导致TS2344错误

Question

我得到了一个组件refon我的组件FormCheckbox从patternlib。我试图在我自己的组件TestComp中键入组件，但我得到这是错误，我不明白为什么:TS2344: Type '{ name: string; mixins: any[]; inheritAttrs: boolean; props: { id: { type: StringConstructor; required: boolean; }; label: { type: StringConstructor; default: string; }; checked: { ...; }; disabled: { ...; }; }; emits: string[]; computed: { ...; }; }' does not satisfy the constraint 'new (...args: any) => any'.   Type '{ name: string; mixins: any[]; inheritAttrs: boolean; props: { id: { type: StringConstructor; required: boolean; }; label: { type: StringConstructor; default: string; }; checked: { ...; }; disabled: { ...; }; }; emits: string[]; computed: { ...; }; }' provides no match for the signature 'new (...args: any): any'.

FormCheckbox…

<script>
import spacingMixin from "../mixins/spacing.js";
export default {
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…

<template>
<FormCheckbox id="SelectAll" ref="selectAllCheckbox"/>
</template>
export default defineComponent({
name: "TestComp",
components: {
FormCheckbox,
},
setup() {
const checkbox: Ref<InstanceType<typeof FormCheckbox> | null> = ref(null);
return {checkbox}
},
});
</script>

…

我试图添加一个实例类型到我的ref，因为我想使用$el属性以后。

Answer 1

你有一个

export default /* FormCheckbox */ { ... }

import FormCheckbox from ...
export default /* TestComp */ defineComponent({ ... })

Buuuut……defineComponent期望您导入的组件是defineComponent返回的Component。它不允许你使用object。

你需要的是修复FormCheckbox也使用defineComponent

---

如果你没有权限访问代码，你可以使用

// shims-vue.d.ts
/// <reference types="vite/client" />
/// <reference types="vue/ref-macros" />
// Mocks all files ending in `.vue` showing them as plain Vue instances
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}

或

import type { DefineComponent } from 'vue'
let myRef = Ref<DefineComponent<{}, {}, any>>(/* implied `undefined` */)

或者使用this.$refs.selectAllCheckbox那么你根本不需要定义它iirc