types(runtime-core): improve the extracted instance types

packages/runtime-core/src/apiDefineComponent.ts

@@ -36,6 +36,7 @@ export function defineComponent<Props, RawBindings = object>(
   ) => RawBindings | RenderFunction
 ): ComponentPublicInstanceConstructor<
   CreateComponentPublicInstance<
+    undefined,
     Props,
     RawBindings,
     {},
@@ -77,6 +78,7 @@ export function defineComponent<
   >
 ): ComponentPublicInstanceConstructor<
   CreateComponentPublicInstance<
+    undefined,
     Props,
     RawBindings,
     D,
@@ -129,6 +131,7 @@ export function defineComponent<
   // array props technically doesn't place any constraints on props in TSX before,
   // but now we can export array props in TSX
   CreateComponentPublicInstance<
+    { [key in PropNames]?: { type: null } },
     Readonly<{ [key in PropNames]?: any }>,
     RawBindings,
     D,
@@ -180,6 +183,7 @@ export function defineComponent<
   >
 ): ComponentPublicInstanceConstructor<
   CreateComponentPublicInstance<
+    PropsOptions,
     ExtractPropTypes<PropsOptions, false>,
     RawBindings,
     D,

packages/runtime-core/src/componentOptions.ts

@@ -77,6 +77,7 @@ export interface ComponentCustomOptions {}
 export type RenderFunction = () => VNodeChild
 
 export interface ComponentOptionsBase<
+  PropsOptions,
   Props,
   RawBindings,
   D,
@@ -87,7 +88,7 @@ export interface ComponentOptionsBase<
   E extends EmitsOptions,
   EE extends string = string
 >
-  extends LegacyOptions<Props, D, C, M, Mixin, Extends>,
+  extends LegacyOptions<PropsOptions, Props, D, C, M, Mixin, Extends>,
     ComponentInternalOptions,
     ComponentCustomOptions {
   setup?: (
@@ -163,10 +164,22 @@ export type ComponentOptionsWithoutProps<
   Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
   E extends EmitsOptions = EmitsOptions,
   EE extends string = string
-> = ComponentOptionsBase<Props, RawBindings, D, C, M, Mixin, Extends, E, EE> & {
+> = ComponentOptionsBase<
+  undefined,
+  Props,
+  RawBindings,
+  D,
+  C,
+  M,
+  Mixin,
+  Extends,
+  E,
+  EE
+> & {
   props?: undefined
 } & ThisType<
     CreateComponentPublicInstance<
+      undefined,
       {},
       RawBindings,
       D,
@@ -189,11 +202,24 @@ export type ComponentOptionsWithArrayProps<
   Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
   E extends EmitsOptions = EmitsOptions,
   EE extends string = string,
-  Props = Readonly<{ [key in PropNames]?: any }>
-> = ComponentOptionsBase<Props, RawBindings, D, C, M, Mixin, Extends, E, EE> & {
+  Props = Readonly<{ [key in PropNames]?: any }>,
+  PropsOptions = { [key in PropNames]?: { type: null } }
+> = ComponentOptionsBase<
+  PropsOptions,
+  Props,
+  RawBindings,
+  D,
+  C,
+  M,
+  Mixin,
+  Extends,
+  E,
+  EE
+> & {
   props: PropNames[]
 } & ThisType<
     CreateComponentPublicInstance<
+      PropsOptions,
       Props,
       RawBindings,
       D,
@@ -216,10 +242,22 @@ export type ComponentOptionsWithObjectProps<
   E extends EmitsOptions = EmitsOptions,
   EE extends string = string,
   Props = Readonly<ExtractPropTypes<PropsOptions>>
-> = ComponentOptionsBase<Props, RawBindings, D, C, M, Mixin, Extends, E, EE> & {
+> = ComponentOptionsBase<
+  PropsOptions,
+  Props,
+  RawBindings,
+  D,
+  C,
+  M,
+  Mixin,
+  Extends,
+  E,
+  EE
+> & {
   props: PropsOptions & ThisType<void>
 } & ThisType<
     CreateComponentPublicInstance<
+      PropsOptions,
       Props,
       RawBindings,
       D,
@@ -280,6 +318,7 @@ type ComponentInjectOptions =
     >
 
 interface LegacyOptions<
+  PropsOptions,
   Props,
   D,
   C extends ComputedOptions,
@@ -295,8 +334,8 @@ interface LegacyOptions<
   // since that leads to some sort of circular inference and breaks ThisType
   // for the entire component.
   data?: (
-    this: CreateComponentPublicInstance<Props>,
-    vm: CreateComponentPublicInstance<Props>
+    this: CreateComponentPublicInstance<PropsOptions, Props>,
+    vm: CreateComponentPublicInstance<PropsOptions, Props>
   ) => D
   computed?: C
   methods?: M

packages/runtime-core/src/componentPublicInstance.ts

@@ -29,7 +29,7 @@ import {
   resolveMergedOptions,
   isInBeforeCreate
 } from './componentOptions'
-import { normalizePropsOptions } from './componentProps'
+import { normalizePropsOptions, ExtractPropTypes } from './componentProps'
 import { EmitsOptions, EmitFn } from './componentEmits'
 import { Slots } from './componentSlots'
 import {
@@ -71,6 +71,7 @@ type IsDefaultMixinComponent<T> = T extends ComponentOptionsMixin
   : false
 
 type MixinToOptionTypes<T> = T extends ComponentOptionsBase<
+  any,
   infer P,
   infer B,
   infer D,
@@ -102,7 +103,7 @@ type UnwrapMixinsType<
 type EnsureNonVoid<T> = T extends void ? {} : T
 
 export type ComponentPublicInstanceConstructor<
-  T extends ComponentPublicInstance = ComponentPublicInstance<any>
+  T extends ComponentPublicInstance = ComponentPublicInstance<any, any>
 > = {
   __isFragment?: never
   __isTeleport?: never
@@ -111,6 +112,7 @@ export type ComponentPublicInstanceConstructor<
 }
 
 export type CreateComponentPublicInstance<
+  PropsOptions,
   P = {},
   B = {},
   D = {},
@@ -129,26 +131,28 @@ export type CreateComponentPublicInstance<
   PublicM extends MethodOptions = UnwrapMixinsType<PublicMixin, 'M'> &
     EnsureNonVoid<M>
 > = ComponentPublicInstance<
+  PropsOptions,
   PublicP,
   PublicB,
   PublicD,
   PublicC,
   PublicM,
   E,
   PublicProps,
-  ComponentOptionsBase<P, B, D, C, M, Mixin, Extends, E>
+  ComponentOptionsBase<PropsOptions, P, B, D, C, M, Mixin, Extends, E>
 >
 // public properties exposed on the proxy, which is used as the render context
 // in templates (as `this` in the render option)
 export type ComponentPublicInstance<
+  PropsOptions = undefined,
   P = {}, // props type extracted from props option
   B = {}, // raw bindings returned from setup()
   D = {}, // return from data()
   C extends ComputedOptions = {},
   M extends MethodOptions = {},
   E extends EmitsOptions = {},
   PublicProps = P,
-  Options = ComponentOptionsBase<any, any, any, any, any, any, any, any>
+  Options = ComponentOptionsBase<any, any, any, any, any, any, any, any, any>
 > = {
   $: ComponentInternalInstance
   $data: D
@@ -165,6 +169,7 @@ export type ComponentPublicInstance<
   $nextTick: typeof nextTick
   $watch: typeof instanceWatch
 } & P &
+  Readonly<ExtractPropTypes<PropsOptions>> &
   ShallowUnwrapRef<B> &
   D &
   ExtractComputedReturns<C> &

test-dts/defineComponent.test-d.tsx

@@ -94,7 +94,7 @@ describe('with object props', () => {
       // default + function
       ffff: {
         type: Function as PropType<(a: number, b: string) => { a: boolean }>,
-        default: (a: number, b: string) => ({ a: true })
+        default: (a: number, b: string) => ({ a: a > +b })
       },
       validated: {
         type: String,
@@ -799,3 +799,58 @@ describe('componentOptions setup should be `SetupContext`', () => {
     ctx: SetupContext
   ) => any)
 })
+
+describe('extract instance type', () => {
+  const Base = defineComponent({
+    props: {
+      baseA: {
+        type: Number,
+        default: 1
+      }
+    }
+  })
+  const MixinA = defineComponent({
+    props: {
+      mA: {
+        type: String,
+        default: ''
+      }
+    }
+  })
+  const CompA = defineComponent({
+    extends: Base,
+    mixins: [MixinA],
+    props: {
+      a: {
+        type: Boolean,
+        default: false
+      },
+      b: {
+        type: String,
+        required: true
+      },
+      c: Number
+    }
+  })
+
+  const compA = {} as InstanceType<typeof CompA>
+
+  expectType<boolean>(compA.a)
+  expectType<string>(compA.b)
+  expectType<number | undefined>(compA.c)
+  // mixins
+  expectType<string>(compA.mA)
+  // extends
+  expectType<number>(compA.baseA)
+
+  //  @ts-expect-error
+  expectError((compA.a = true))
+  //  @ts-expect-error
+  expectError((compA.b = 'foo'))
+  //  @ts-expect-error
+  expectError((compA.c = 1))
+  //  @ts-expect-error
+  expectError((compA.mA = 'foo'))
+  //  @ts-expect-error
+  expectError((compA.baseA = 1))
+})