types(defineComponent): props support in TypeScript

[Zclhlmgqzc]

fix #3796

[pikax]

@Zclhlmgqzc can you fix test-dts errors?

to test locally run yarn test-dts

[Zclhlmgqzc]

@Zclhlmgqzc can you fix test-dts errors?

to test locally run yarn test-dts

Which code is better?

export type DefineComponent<
...
  - Props = Readonly<ExtractPropTypes<PropsOrPropOptions>> & 
  + Props = Readonly<ExtractPropTypes<PropsOrPropOptions extends undefined ? {} : PropsOrPropOptions>> & 
...
>

or

export type ExtractPropTypes<O> = O extends object
  ? { [K in keyof O]?: unknown } & // This is needed to keep the relation between the option prop and the props, allowing to use ctrl+click to navigate to the prop options. see: #3656
      { [K in RequiredKeys<O>]: InferPropType<O[K]> } &
      { [K in OptionalKeys<O>]?: InferPropType<O[K]> }
 + : O extends undefined
 + ? {}
  : { [K in string]: any }

[pikax]

Which code is better?

Can't you just not pass undefined on the generic?

[Zclhlmgqzc]

Which code is better?

Can't you just not pass undefined on the generic?

because

DefineComponent =
...
& {
    props: PropsOrPropOptions
  }

const Comp = defineComponent({ props: {} })

==> {
 props: {}
}

//  Comp.props === {}

const Comp = defineComponent({})

==> {
 props: undefined
}

// Comp.props === undefined
// @ts-expect-error
Comp.props.a

[pikax]

Thanks, maybe the second option might be better (but just a preference)

[Zclhlmgqzc]

Thanks, maybe the second option might be better (but just a preference)

Thanks for your review

[Zclhlmgqzc]

see #5416