The current documentation for the defineSlots
macro offers the following example:
const slots = defineSlots<{
default(props: { msg: string }): any
}>()
This example works well for defining slot props, but it raises questions about the return type of the slot function, which is currently typed as any
. While this is sufficient for many use cases, could it be improved for scenarios where developers interact with slots programmatically in a component’s script?
For instance, consider the alternative of leveraging the Slot
type from the @vue/runtime-core package
. This type explicitly represents a slot function and can be used as follows:
import type { Slot } from '@vue/runtime-core'
const slots = defineSlots<{
default: Slot<{ msg: string }>
}>()
Should the Return Type Be More Explicit?
Future Considerations
Documentation Enhancements
Slot
be added to the documentation to cater to developers seeking higher type safety in specific use cases?Here’s a comparison of how the current approach and the Slot
-based approach handle programmatic slot interactions:
any
(Current Documentation)const slots = defineSlots<{
default(props: { msg: string }): any
}>()
if (slots.default) {
slots.default() // => any
}
Slot
import type { Slot } from '@vue/runtime-core'
const slots = defineSlots<{
default: Slot<{ msg: string }>
}>()
if (slots.default) {
slots.default() // => VNode[]
}
I’d love to hear thoughts from the community: