fix(types/custome-element): defineCustomElement props inference with array emits (#11384)

close #11353

Author: andylizi

packages/dts-test/defineCustomElement.test-d.ts

@@ -68,7 +68,7 @@ describe('inject', () => {
 })
 
 describe('defineCustomElement using defineComponent return type', () => {
-  test('with emits', () => {
+  test('with object emits', () => {
     const Comp1Vue = defineComponent({
       props: {
         a: String,
@@ -80,6 +80,23 @@ describe('defineCustomElement using defineComponent return type', () => {
     const Comp = defineCustomElement(Comp1Vue)
     expectType<VueElementConstructor>(Comp)
 
-    expectType<string | undefined>(new Comp().a)
+    const instance = new Comp()
+    expectType<string | undefined>(instance.a)
+    instance.a = ''
+  })
+
+  test('with array emits', () => {
+    const Comp1Vue = defineComponent({
+      props: {
+        a: Number,
+      },
+      emits: ['click'],
+    })
+    const Comp = defineCustomElement(Comp1Vue)
+    expectType<VueElementConstructor>(Comp)
+
+    const instance = new Comp()
+    expectType<number | undefined>(instance.a)
+    instance.a = 42
   })
 })

packages/runtime-dom/src/apiCustomElement.ts

@@ -142,11 +142,17 @@ export function defineCustomElement<
     >,
 ): VueElementConstructor<ResolvedProps>
 
-// overload 5: defining a custom element from the returned value of
+// overload 3: defining a custom element from the returned value of
 // `defineComponent`
-export function defineCustomElement<P>(
-  options: DefineComponent<P, any, any, any>,
-): VueElementConstructor<ExtractPropTypes<P>>
+export function defineCustomElement<
+  T extends DefineComponent<any, any, any, any>,
+>(
+  options: T,
+): VueElementConstructor<
+  T extends DefineComponent<infer P, any, any, any>
+    ? ExtractPropTypes<P>
+    : unknown
+>
 
 /*! #__NO_SIDE_EFFECTS__ */
 export function defineCustomElement(