How to fix props type inheritance?

[FragsterAt]

I'm trying to type component, that have all props from used component, here is my code:

<template>
  <v-btn
    class="px-2 -mx-2 !max-w-none"
    :color
    :variant
    v-bind="props">
    <slot></slot>
  </v-btn>
</template>
<script setup lang="ts">
import { VBtn } from 'vuetify/components/VBtn';

type VBtnProps = InstanceType<typeof VBtn>['$props']

const {color='primary', variant='text', ...props} = defineProps<VBtnProps>()
</script>

in VS Code all works as expected, but when I run npm run dev I see this error in console and browser:

14:53:58 [vite] Internal server error: [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type

.../src/components/global/CellLink.vue
11 |  import { VBtn } from 'vuetify/components/VBtn';
12 |  
13 |  type VBtnProps = InstanceType<typeof VBtn>['$props']
   |                   ^^^^^^^^^^^^^^^^^^^^^^^^^
14 |  
15 |  const {color='primary', variant='text', ...props} = defineProps<VBtnProps>()

Vue version: 3.5.22

How can I fix that?

[FragsterAt]

with vue-component-type-helpers and following code:

import type { ComponentProps } from 'vue-component-type-helpers';
import { VBtn } from 'vuetify/components/VBtn';

type VBtnProps = ComponentProps<typeof VBtn>

const {color='primary', variant='text', ...props} = defineProps<VBtnProps>()

everything also works in VS Code, but in browser I have different error:

15:10:25 [vite] Internal server error: [@vue/compiler-sfc] Unresolvable type: TSConditionalType

.../node_modules/vue-component-type-helpers/index.d.ts
1  |  export type ComponentType<T> = T extends new (...args: any) => {} ? 1 : T extends (...args: any) => any ? 2 : 0;
2  |  export type ComponentProps<T> = T extends new (...args: any) => {
   |                                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
3  |      $props: infer P;
   |  ^^^^^^^^^^^^^^^^^^^^
4  |  } ? NonNullable<P> : T extends (props: infer P, ...args: any) => any ? P : {};
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

[FragsterAt]

I find workaround: add @vue-ignore magic comment (from https://github.com/vuejs/language-tools/wiki/Directive-Comments) and set defaults in template:

<template>
  <v-btn
    class="px-2 -mx-2 !max-w-none"
    color="primary"
    variant="text"
    v-bind="props">
    <slot></slot>
  </v-btn>
</template>
<script setup lang="ts">
import { VBtn } from 'vuetify/components/VBtn';

type VBtnProps = /* @vue-ignore */ InstanceType<typeof VBtn>['$props']

const props = defineProps<VBtnProps>()
</script>

but I don't like it. Is there a better solution?