Passing undefined properties leads to an error using component generics
Vue version
v3.3.4
Link to minimal reproduction
Steps to reproduce
- Create a component using the new component generics
<script setup lang="ts" generic="T">
withDefaults(defineProps<{a?: T}>(), {})
</script>
<template><h1>{{a}}</h1></template>
- use the component and give it a property which is not defined:
<template> <comp :error="error"/> </template>
- run
vue-tsc --noEmit
What is expected?
vue-tsc --noEmit
does not fail and compiles the component.
This works already with non generic components.
use-case: undefined properties are passed through to the next top-level component props without writing bloat.
What is actually happening?
throws warning:
Argument of type '{ error: true; }' is not assignable to parameter of type '{ a?: any; } & VNodeProps & AllowedComponentProps & ComponentCustomProps'.
Object literal may only specify known properties, and 'error' does not exist in type '{ a?: any; } & VNodeProps & AllowedComponentProps & ComponentCustomProps'.
System Info
No response
Any additional comments?
Quick fix for now:
declare module "@vue/runtime-core" {
interface AllowedComponentProps {
error?: unknown
}
}
If I understand correctly, is this issue about TypeScript rather than runtime? If so, we should transfer it to repo of vue language tools.
/cc @johnsoncodehk