fix(types): avoid merging component instance into $props in ComponentInstance (#12870)

close #12751

Author: jh-leong

packages-private/dts-test/componentInstance.test-d.tsx

@@ -137,3 +137,18 @@ describe('Generic component', () => {
   expectType<string | number>(comp.msg)
   expectType<Array<string | number>>(comp.list)
 })
+
+// #12751
+{
+  const Comp = defineComponent({
+    __typeEmits: {} as {
+      'update:visible': [value?: boolean]
+    },
+  })
+  const comp: ComponentInstance<typeof Comp> = {} as any
+
+  expectType<((value?: boolean) => any) | undefined>(comp['onUpdate:visible'])
+  expectType<{ 'onUpdate:visible'?: (value?: boolean) => any }>(comp['$props'])
+  // @ts-expect-error
+  comp['$props']['$props']
+}

packages/runtime-core/src/component.ts

@@ -115,20 +115,23 @@ export type ComponentInstance<T> = T extends { new (): ComponentPublicInstance }
   : T extends FunctionalComponent<infer Props, infer Emits>
     ? ComponentPublicInstance<Props, {}, {}, {}, {}, ShortEmitsToObject<Emits>>
     : T extends Component<
-          infer Props,
+          infer PropsOrInstance,
           infer RawBindings,
           infer D,
           infer C,
           infer M
         >
-      ? // NOTE we override Props/RawBindings/D to make sure is not `unknown`
-        ComponentPublicInstance<
-          unknown extends Props ? {} : Props,
-          unknown extends RawBindings ? {} : RawBindings,
-          unknown extends D ? {} : D,
-          C,
-          M
-        >
+      ? PropsOrInstance extends { $props: unknown }
+        ? // T is returned by `defineComponent()`
+          PropsOrInstance
+        : // NOTE we override Props/RawBindings/D to make sure is not `unknown`
+          ComponentPublicInstance<
+            unknown extends PropsOrInstance ? {} : PropsOrInstance,
+            unknown extends RawBindings ? {} : RawBindings,
+            unknown extends D ? {} : D,
+            C,
+            M
+          >
       : never // not a vue Component
 
 /**
@@ -259,16 +262,16 @@ export type ConcreteComponent<
  * The constructor type is an artificial type returned by defineComponent().
  */
 export type Component<
-  Props = any,
+  PropsOrInstance = any,
   RawBindings = any,
   D = any,
   C extends ComputedOptions = ComputedOptions,
   M extends MethodOptions = MethodOptions,
   E extends EmitsOptions | Record<string, any[]> = {},
   S extends Record<string, any> = any,
 > =
-  | ConcreteComponent<Props, RawBindings, D, C, M, E, S>
-  | ComponentPublicInstanceConstructor<Props>
+  | ConcreteComponent<PropsOrInstance, RawBindings, D, C, M, E, S>
+  | ComponentPublicInstanceConstructor<PropsOrInstance>
 
 export type { ComponentOptions }