I am currently working with a combination of technologies, and I am struggling to pinpoint the root cause of the issue.
Here is the Tech Stack:
- Vue 3
- TypeScript
- Vite
- VSCode / Volar
- unplugin-vue-macros (https://github.com/sxzz/vue-macros)
- unplugin-vue-components (https://github.com/antfu/unplugin-vue-components)
Within my component (MetadataTemplate.vue), I have defined the following props:
interface Props {
link: Link
type: 'link' | 'collection'
showSuccess?: Function
refresh?: Function
displayButtons?: boolean
}
const props = withDefaults(defineProps<Props>(), {
type: 'link',
refresh: () => {}
})
It's important to note that type is a mandatory property. However, when using the code snippet below, a TypeScript error occurs:
<MetadataTemplate
:type="pageType"
:link="link"
/>
The variable pageType has a type of 'link' | 'collection'. Surprisingly, TypeScript (Volar) throws the following error message:
Type 'string' is not assignable to type '"collection" | "link" | undefined'.ts(2322)
MetadataTemplate.vue(33, 3): The expected type comes from property 'type' which is declared here on type 'Partial<{ type: "collection" | "link"; refresh: Function; }> & Omit<Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, { ...; }>>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, DefaultKeys<...>> & Record<...>'
This behavior seems to be related to exporting the props as Partial. Is this standard behavior for Vue / TypeScript or something specific to Volar? I am puzzled by what could be causing the translation of props into Partial props.