fix(types): prop type infer, fix #555 (#561)

Author: Mister-Hope

src/component/componentProps.ts

@@ -8,14 +8,14 @@ export type ComponentObjectPropsOptions<P = Data> = {
   [K in keyof P]: Prop<P[K]> | null
 }
 
-export type Prop<T> = PropOptions<T> | PropType<T>
+export type Prop<T, D = T> = PropOptions<T, D> | PropType<T>
 
 type DefaultFactory<T> = () => T | null | undefined
 
-export interface PropOptions<T = any> {
+export interface PropOptions<T = any, D = T> {
   type?: PropType<T> | true | null
   required?: boolean
-  default?: T | DefaultFactory<T> | null | undefined
+  default?: D | DefaultFactory<D> | null | undefined | object
   validator?(value: unknown): boolean
 }
 
@@ -26,18 +26,11 @@ type PropConstructor<T> =
   | { (): T }
   | { new (...args: string[]): Function }
 
-type RequiredKeys<T, MakeDefaultRequired> = {
-  [K in keyof T]: T[K] extends
-    | { required: true }
-    | (MakeDefaultRequired extends true ? { default: any } : never)
-    ? K
-    : never
+type RequiredKeys<T> = {
+  [K in keyof T]: T[K] extends { required: true } | { default: any } ? K : never
 }[keyof T]
 
-type OptionalKeys<T, MakeDefaultRequired> = Exclude<
-  keyof T,
-  RequiredKeys<T, MakeDefaultRequired>
->
+type OptionalKeys<T> = Exclude<keyof T, RequiredKeys<T>>
 
 type ExtractFunctionPropType<
   T extends Function,
@@ -55,18 +48,18 @@ type InferPropType<T> = T extends null
   : T extends { type: null | true }
     ? any // As TS issue https://github.com/Microsoft/TypeScript/issues/14829 // somehow `ObjectConstructor` when inferred from { (): T } becomes `any` // `BooleanConstructor` when inferred from PropConstructor(with PropMethod) becomes `Boolean`
     : T extends ObjectConstructor | { type: ObjectConstructor }
-      ? { [key: string]: any }
+      ? Record<string, any>
       : T extends BooleanConstructor | { type: BooleanConstructor }
         ? boolean
         : T extends FunctionConstructor
           ? Function
-          : T extends Prop<infer V>
-            ? ExtractCorrectPropType<V> : T;
+          : T extends Prop<infer V, infer D>
+            ? unknown extends V
+              ? D
+              : ExtractCorrectPropType<V>
+            : T
 
-export type ExtractPropTypes<
-  O,
-  MakeDefaultRequired extends boolean = true
-> = O extends object
-  ? { [K in RequiredKeys<O, MakeDefaultRequired>]: InferPropType<O[K]> } &
-      { [K in OptionalKeys<O, MakeDefaultRequired>]?: InferPropType<O[K]> }
+export type ExtractPropTypes<O> = O extends object
+  ? { [K in RequiredKeys<O>]: InferPropType<O[K]> } &
+      { [K in OptionalKeys<O>]?: InferPropType<O[K]> }
   : { [K in string]: any }

src/component/componentProxy.ts

@@ -39,7 +39,7 @@ type VueConstructorProxy<PropsOptions, RawBindings> = VueConstructor & {
   new (...args: any[]): ComponentRenderProxy<
     ExtractPropTypes<PropsOptions>,
     ShallowUnwrapRef<RawBindings>,
-    ExtractPropTypes<PropsOptions, false>
+    ExtractPropTypes<PropsOptions>
   >
 }
 
@@ -59,6 +59,6 @@ export type VueProxy<
   Methods,
   Computed,
   PropsOptions,
-  ExtractPropTypes<PropsOptions, false>
+  ExtractPropTypes<PropsOptions>
 > &
   VueConstructorProxy<PropsOptions, RawBindings>

test-dts/defineComponent.test-d.ts

@@ -14,6 +14,7 @@ describe('with object props', () => {
     b: string
     e?: Function
     bb: string
+    bbb: string
     cc?: string[] | undefined
     dd: { n: 1 }
     ee?: () => string
@@ -23,6 +24,9 @@ describe('with object props', () => {
     eee: () => { a: string }
     fff: (a: number, b: string) => { a: boolean }
     hhh: boolean
+    ggg: 'foo' | 'bar'
+    ffff: (a: number, b: string) => { a: boolean }
+    validated?: string
   }
 
   type GT = string & { __brand: unknown }
@@ -40,6 +44,11 @@ describe('with object props', () => {
       bb: {
         default: 'hello',
       },
+      bbb: {
+        // Note: default function value requires arrow syntax + explicit
+        // annotation
+        default: (props: any) => (props.bb as string) || 'foo',
+      },
       // explicit type casting
       cc: Array as PropType<string[]>,
       // required + type casting
@@ -68,10 +77,25 @@ describe('with object props', () => {
         type: Function as PropType<(a: number, b: string) => { a: boolean }>,
         required: true,
       },
+      // default + type casting
+      ggg: {
+        type: String as PropType<'foo' | 'bar'>,
+        default: 'foo',
+      },
       hhh: {
         type: Boolean,
         required: true,
       },
+      // default + function
+      ffff: {
+        type: Function as PropType<(a: number, b: string) => { a: boolean }>,
+        default: (_a: number, _b: string) => ({ a: true }),
+      },
+      validated: {
+        type: String,
+        // validator requires explicit annotation
+        validator: (val: unknown) => val !== '',
+      },
     },
     setup(props) {
       // type assertion. See https://github.com/SamVerschueren/tsd
@@ -83,11 +107,15 @@ describe('with object props', () => {
       expectType<ExpectedProps['dd']>(props.dd)
       expectType<ExpectedProps['ee']>(props.ee)
       expectType<ExpectedProps['ff']>(props.ff)
+      expectType<ExpectedProps['bbb']>(props.bbb)
       expectType<ExpectedProps['ccc']>(props.ccc)
       expectType<ExpectedProps['ddd']>(props.ddd)
       expectType<ExpectedProps['eee']>(props.eee)
       expectType<ExpectedProps['fff']>(props.fff)
+      expectType<ExpectedProps['ggg']>(props.ggg)
       expectType<ExpectedProps['hhh']>(props.hhh)
+      expectType<ExpectedProps['ffff']>(props.ffff)
+      expectType<ExpectedProps['validated']>(props.validated)
 
       isNotAnyOrUndefined(props.a)
       isNotAnyOrUndefined(props.b)
@@ -97,11 +125,14 @@ describe('with object props', () => {
       isNotAnyOrUndefined(props.dd)
       isNotAnyOrUndefined(props.ee)
       isNotAnyOrUndefined(props.ff)
+      isNotAnyOrUndefined(props.bbb)
       isNotAnyOrUndefined(props.ccc)
       isNotAnyOrUndefined(props.ddd)
       isNotAnyOrUndefined(props.eee)
       isNotAnyOrUndefined(props.fff)
+      isNotAnyOrUndefined(props.ggg)
       isNotAnyOrUndefined(props.hhh)
+      isNotAnyOrUndefined(props.ffff)
 
       expectError((props.a = 1))
 
@@ -126,11 +157,15 @@ describe('with object props', () => {
       expectType<ExpectedProps['dd']>(props.dd)
       expectType<ExpectedProps['ee']>(props.ee)
       expectType<ExpectedProps['ff']>(props.ff)
+      expectType<ExpectedProps['bbb']>(props.bbb)
       expectType<ExpectedProps['ccc']>(props.ccc)
       expectType<ExpectedProps['ddd']>(props.ddd)
       expectType<ExpectedProps['eee']>(props.eee)
       expectType<ExpectedProps['fff']>(props.fff)
+      expectType<ExpectedProps['ggg']>(props.ggg)
       expectType<ExpectedProps['hhh']>(props.hhh)
+      expectType<ExpectedProps['ffff']>(props.ffff)
+      expectType<ExpectedProps['validated']>(props.validated)
 
       // @ts-expect-error props should be readonly
       expectError((props.a = 1))
@@ -144,10 +179,13 @@ describe('with object props', () => {
       expectType<ExpectedProps['dd']>(this.dd)
       expectType<ExpectedProps['ee']>(this.ee)
       expectType<ExpectedProps['ff']>(this.ff)
+      expectType<ExpectedProps['bbb']>(this.bbb)
       expectType<ExpectedProps['ccc']>(this.ccc)
       expectType<ExpectedProps['ddd']>(this.ddd)
       expectType<ExpectedProps['eee']>(this.eee)
       expectType<ExpectedProps['fff']>(this.fff)
+      expectType<ExpectedProps['ggg']>(this.ggg)
+      expectType<ExpectedProps['ffff']>(this.ffff)
       expectType<ExpectedProps['hhh']>(this.hhh)
 
       // @ts-expect-error props on `this` should be readonly