Vue `v-bind="$attrs"` breaks typing

589 Views Asked by At

When using fall through attributes, is there a way to ignore types? Props are successfully making their way from component A to B to C. I use $attrs in component B to forward and I declare props in component C. However there is a consistent Type Error on Component B not providing the correct props

<!-- Component A -->
<ComponentB :color="color" :width="23" />
<! -- Component B -->
<template>
  <div>hello</div>
  <!-- TypeError missing the following properties from type -->
  <ComponentC
    v-bind="$attrs"
  />
</template>
<! -- Component C -->
<script lang="ts" setup>
  const props = withDefaults(
    defineProps<{
      color: string
      width: number
    }>
  )
</script>
1

There are 1 best solutions below

0
On

The best fix I can find is to include all the forwarded props in default value section

const props = withDefaults(
  defineProps<{
    start: Date
    name: string
  }>(),
  {
    start: () => new Date(),
    name: undefined, // undefined works even without the '?' above
  }
)