I received a component reference on my FormCheckbox component from a patternlib. When I tried to incorporate the component into my own TestComp component, I encountered this TypeScript error that left me puzzled:
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>
...
I attempted to apply an InstanceType to my ref as I have plans to utilize the $el property in the future.