Best practice for reusable types in defineProps

[AnnaYuS]

My goal is to add prop types in defineProps that use prop types of another component:

import MyComponent from './MyComponent.vue'

type Props = Omit< InstanceType<typeof MyComponent>, `$${string}` | 'errors' | 'modelValue'>

const props = withDefaults(defineProps<Props>(), {
  required: false,
  disabled: false,
})

But this fails with Error: [vite:vue] [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type

In vue docs it says that this error is expected kind of:

This limitation has been resolved in 3.3. The latest version of Vue supports referencing imported and a limited set of complex types in the type parameter position. However, because the type to runtime conversion is still AST-based, some complex types that require actual type analysis, e.g. conditional types, are not supported. You can use conditional types for the type of a single prop, but not the entire props object.
https://vuejs.org/api/sfc-script-setup.html#type-only-props-emit-declarations

i've tried to use ComponentProps from vue-component-type-helpers but this also throws an error

Error: [vite:vue] [@vue/compiler-sfc] Unresolvable type: TSConditionalType
...
9  |
10 |  export type ComponentProps<T> =
11 |  	T extends new () => { $props: infer P; } ? NonNullable<P> :
   |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
12 |  	T extends (props: infer P, ...args: any) => any ? P :
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
13 |  	{};
   |  ^^^

I was wondering if anyone has found a workaround for this or knows a better way to make sure that the components use the same props?

[Shyam-Chen]

type TextFieldProps = ComponentProps<typeof TextField>;

interface Props extends /* @vue-ignore */ TextFieldProps {
  label?: string;
  meter?: boolean;
  required?: boolean;
  invalid?: boolean | string;
  help?: string;
}

const valueModel = defineModel<string>('value', { default: '' });

defineProps<Props>();