From e94b01bd8a1ec740eddc823839ab2627b307c1b0 Mon Sep 17 00:00:00 2001
From: Andy Li <andylizi666@gmail.com>
Date: Mon, 5 Aug 2024 11:14:36 +0800
Subject: [PATCH] fix(types/custome-element): `defineCustomElement` props
 inference with array emits (#11384)

close #11353
---
 .../dts-test/defineCustomElement.test-d.ts    | 21 +++++++++++++++++--
 packages/runtime-dom/src/apiCustomElement.ts  | 14 +++++++++----
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/packages/dts-test/defineCustomElement.test-d.ts b/packages/dts-test/defineCustomElement.test-d.ts
index 2d48dbc1bc9..b81c0befe9f 100644
--- a/packages/dts-test/defineCustomElement.test-d.ts
+++ b/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
   })
 })
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index a92248dd55d..add20925746 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/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(