typescript - ¿Cómo definir una interfaz que los componentes dinámicos de VueJS deben implementar?
Estoy haciendo un cuadro de diálogo de formulario que está destinado a ser genérico con respecto al tipo de formulario que incorpora. Para este propósito, uso componentes dinámicos de VueJS para definir qué tipo de formulario debe instanciar un cuadro de diálogo en particular.
Funciona, pero no es seguro en cuanto a tipos: cualquier componente puede ser pasado al diálogo. Preferiría restringirlos para que implementen una interfaz particular (digamos, un componente debería emitir un evento created para ser considerado un componente de Formulario).
Esto es lo que intenté:
// FormComponent.vue
// This is my attempt at defining an "abstract" component
// that defines the interface other form components should implement
<script setup lang="ts" generic="ItemType extends { id: string }">
defineEmits<{
(event: 'created', item: ItemType): void
(event: 'edited', item: ItemType): void
}>()
</script>
// FormDialog.vue
<template>
<v-dialog persistent v-model="dialog">
<v-card title="Form">
<v-card-text>
<component :is="form" />
</v-card-text>
</v-card>
</v-dialog>
</template>
// Using generics to define the interface of the form passed as prop
<script
setup
lang="ts"
generic="
ItemType extends { id: string },
Form extends ComponentExposed<typeof FormComponent<ItemType>>
"
>
import { ref } from 'vue'
import { ComponentExposed } from 'vue-component-type-helpers'
import FormComponent from './FormComponent.vue'
const dialog = ref(false)
defineProps<{ form: Form }>()
</script>
Esto no funciona, todavía puedo pasar cualquier componente como prop a FormDialog sin que el compilador se queje en absoluto.