`ExtractExternalPropTypes` - Utility type to generate type/interface from props object syntax

[jd-solanki]

What problem does this feature solve?

Hi 👋🏻

I heavily use object syntax for defining props in my UI lib. It allows me to define prop defaults and helps me reuse the props in another component.

Assume I have props like:

const props = {
  isActive: Boolean,
}

how do I generate the type of it?

{
  isActive?: boolean
}

This is just a simple example, We can also have prop defaults and we need to set it as optional for that type/interface property.

I stumbled upon ExtractPropTypes but after exploring vue repo I found that this is not for this use case, it's for the child component.

What does the proposed API look like?

As Evan stated: export type Props = ExtractExternalPropTypes<typeof props>

[modelair]

did u mean this?

 interface MyProps extends MyOtherProps {
  color?: MyColor
  modelValue?: number
} 

const props = withDefaults(defineProps<MyProps>(), {
  color: 'green',
  modelValue: 0
})

[jd-solanki]

Thanks for your response.

No! It's already in docs.

I'm saying, Generating type from object syntax as shared in the code snippet.