Subscribe on changes!

Passing undefined properties leads to an error using component generics

avatar
Aug 14th 2023

Vue version

v3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqtVEtv00AQ/iurvbSVEq9QOQU3FGiF4FAqyNEXY0+cLd6HZtdJJMv/ndl1EmzT8BCc7Hl/8/i25W+sTbYN8AVPXYHSeubAN3aZaamsQc/eGWXfgwaUBVujUewiEQNdCL54NfJ+MKjyeuTcq46+mS6Mdp4BokF2wzw2QOpU9AioNgkelK1zDyQxlhaUZK77xIsYd5Px+M24GLhUB6TP+aTilJPPeA94rnKbPDmjaQBtSJMdDC7jCxY1QUfAg5zxjffWLYQoSk1hJdRyi4kGL7RV4pbcBDbaSwXz0qjb6+Q6eSlK6fxQnYBT869odg6QkmR8NigjSLkFnCPoEhAI+p+VnYQNS09MP5UP1btMdzQU72gza1lNRhJGK2vAT9ZL2txoNHldm93HqAt7PPVSbKD49oz+ye37nh4RIrJB/z7HCnxvvv/yAHv6PxmVKZv6sIYzxs/gTN0EjL3b20aXBHvgF9F+iBuWulq5+70H7Y5NBaBxGtE/7iNc77nWf8ClaQ+mOKHHlFusznVFpxlujB0OlsRVxsesGzHoDiASNfBnJ/3mDtZ5U3t3WcJaanhEY13a5q8XbNUtL69mrO2uzlIqckUsx4QY8/RXoP8LTOeRNvAPWI+lfoP0PIr4NPwFkvjKbF4s2z6y61JB0vhd6b4DY3TWfg==

Steps to reproduce

  1. Create a component using the new component generics
<script setup lang="ts" generic="T">
withDefaults(defineProps<{a?: T}>(), {})
</script>
<template><h1>{{a}}</h1></template>
  1. use the component and give it a property which is not defined:
<template> <comp :error="error"/> </template>
  1. 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
  }
}
avatar
Aug 24th 2023

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