feat: Support for generic props component

[pikax]

fix #3102

Allow generic components through a class component declaration.

Class maintain the correct type, if we use function or even the current DefineComponent the finer type will be lost.

This overload allows for the users to override the types to a finer grain

Open for better solutions

example

  type OnChange<ValueType, Clearable> = Clearable extends true
    ? (value: ValueType | null) => void
    : (value: ValueType) => void

  interface GenericProp<Clearable, ValueType> {
    clearable?: Clearable
    value?: ValueType
    onChange?: OnChange<ValueType, Clearable>
  }

  class CompProps<
    Clearable extends boolean,
    ValueType extends string | number | null | undefined
  > extends ComponentPropsOverride<GenericProp<Clearable, ValueType>> {}

  const Comp = defineComponent<typeof CompProps>({
    props: {
      value: Object,
      clearable: Boolean
    }
  })
  ;<Comp
    value={'sss'}
    clearable
    onChange={a => {
      expectType<'sss' | null>(a)
    }}
  />

[pikax]

This is the most important part of this PR, this pretty much bypasses our ComponentPublicInstanceConstructor to prevent the Props type to not be modified

[hyf0]

typo :)

[HcySunYang]

Hey @pikax , you have done a great job 👍, it looks simpler than expected, do we need to add some dts test cases for mixins/extends?

[pikax]

do we need to add some dts test cases for mixins/extends?

Not sure, because it will ignore all the mixins/extends the reason is, as soon as we extract the $props: insfer P we loose the Clearable and ValueType generics:

playground

declare function expectType<T>(a: T): void;

type OnChange<ValueType, Clearable> = Clearable extends true
    ? (value: ValueType | null) => void
    : (value: ValueType) => void
interface GenericProp<Clearable, ValueType> {
    clearable?: Clearable
    value?: ValueType
    onChange?: OnChange<ValueType, Clearable>
}


declare function S<
    Clearable extends boolean,
    ValueType extends string | number | null | undefined
>(): {
    $props: GenericProp<Clearable, ValueType>
}

S().$props // $props is not `GenericProp<Clearable, ValueType>`

class C<
    Clearable extends boolean,
    ValueType extends string | number | null | undefined
    > {
    $props = {} as GenericProp<Clearable, ValueType>
}

new C().$props // $props is not `GenericProp<Clearable, ValueType>`

// but `C` has the correct type


// This would also work
type VueProps<T extends new () => { $props: any }> = T
declare const Comp: VueProps<{
    new <
        Clearable extends boolean,
        ValueType extends string | number | null | undefined
        >(): { $props: GenericProp<Clearable, ValueType> }
}>

The templated constructor intact to keep the correct GenericProp<Clearable, ValueType>, which is lost when you construct or extract the $props

I would say this is an advanced usage, with the current implementation it won't support props declared on mixins/extends since to merge those you will need to extract $props which will lose the generic template.

Public API typing would also been lost, since the constructor will only return {$props}, I think the only way is to support class API component (which I started with), but with just setup method (to keep it simple), since the supporting options in Class we already have vue-class-component.

[HcySunYang]

I would say this is an advanced usage, with the current implementation it won't support props declared on mixins/extends since to merge those you will need to extract $props which will lose the generic template.

I agree with this point

[07akioni]

Must we create a new class for props definition?