Fallthrough attributes not recognized since 1.0.3

[abompard]

Hey! I have this wrapper component:

<template>
  <li class="nav-item">
    <router-link v-bind="$attrs" class="nav-link"><slot /></router-link>
  </li>
</template>

<script lang="ts">
export default {
  inheritAttrs: false,
};
</script>

(very standard way of doing a wrapper attribute as described in vue's docs). I'm calling it like this:

<MainNavLink to="/rules">Rules</MainNavLink>

So I am passing the to property. And vue-tsc gives me this error since upgrading to 1.0.3:

> vue-tsc --noEmit -p tsconfig.vitest.json --composite false

src/components/MainNavLink.vue:3:6 - error TS2322: Type '{ class: string; }' is not assignable to type 'ComponentProps<_RouterLinkI>'.
  Property 'to' is missing in type '{ class: string; }' but required in type 'RouterLinkProps'.

3     <router-link v-bind="$attrs" class="nav-link"><slot /></router-link>
       ~~~~~~~

  node_modules/vue-router/dist/vue-router.d.ts:1153:5
    1153     to: RouteLocationRaw;
             ~~
    'to' is declared here.

It did not give me this error on 0.40.0. I did look at #1384 but I don't think it's the same issue, since it worked fine in 0.40.0.

Is there something else I should do after upgrading to 1.0.x to enable support for fallthrough attributes?

[johnsoncodehk]

Just one of the ways, but you can try:

<template>
  <li class="nav-item">
    <router-link v-bind="$attrs" class="nav-link">
      <slot />
    </router-link>
  </li>
</template>

<script lang="ts">
import { RouterLink } from 'vue-router';

export default {
  inheritAttrs: false,
} as unknown as new () => {
  $props: InstanceType<typeof RouterLink>['$props'],
  $attrs: any,
};
</script>

[abompard]

Okay, it does work but it feels a bit complex. Is this the recommended way to do fallthrough attributes?

[johnsoncodehk]

It can be simplify.

<script lang="ts">
import { DefineComponent } from 'vue';
import { RouterLink } from 'vue-router';

export default {
  inheritAttrs: false,
} as typeof RouterLink & DefineComponent;
</script>

Is this the recommended way to do fallthrough attributes?

It just a workaround from me. I don't know what is the community consensus. You can try ask in TypeScript channel of Vue discord server.

[coader]

any better solution?

[voidus]

This seems like a serious impediment to quality

[so1ve]

@voidus A lot of work is required to perform static analysis. I will look into this.

[so1ve]

Oh I just see you can use defineProps