fix(types/custom-element): defineCustomElement with required props (#…

…11578)

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

@@ -99,4 +99,37 @@ describe('defineCustomElement using defineComponent return type', () => {
     expectType<number | undefined>(instance.a)
     instance.a = 42
   })
+
+  test('with required props', () => {
+    const Comp1Vue = defineComponent({
+      props: {
+        a: { type: Number, required: true },
+      },
+    })
+    const Comp = defineCustomElement(Comp1Vue)
+    expectType<VueElementConstructor>(Comp)
+
+    const instance = new Comp()
+    expectType<number>(instance.a)
+    instance.a = 42
+  })
+
+  test('with default props', () => {
+    const Comp1Vue = defineComponent({
+      props: {
+        a: {
+          type: Number,
+          default: 1,
+          validator: () => true,
+        },
+      },
+      emits: ['click'],
+    })
+    const Comp = defineCustomElement(Comp1Vue)
+    expectType<VueElementConstructor>(Comp)
+
+    const instance = new Comp()
+    expectType<number>(instance.a)
+    instance.a = 42
+  })
 })

packages/runtime-dom/src/apiCustomElement.ts

@@ -9,6 +9,7 @@ import {
   type ComponentOptionsBase,
   type ComponentOptionsMixin,
   type ComponentProvideOptions,
+  type ComponentPublicInstance,
   type ComputedOptions,
   type ConcreteComponent,
   type CreateAppFunction,
@@ -153,14 +154,13 @@ export function defineCustomElement<
 // overload 3: defining a custom element from the returned value of
 // `defineComponent`
 export function defineCustomElement<
-  T extends DefineComponent<any, any, any, any>,
+  // this should be `ComponentPublicInstanceConstructor` but that type is not exported
+  T extends { new (...args: any[]): ComponentPublicInstance<any> },
 >(
   options: T,
   extraOptions?: CustomElementOptions,
 ): VueElementConstructor<
-  T extends DefineComponent<infer P, any, any, any>
-    ? ExtractPropTypes<P>
-    : unknown
+  T extends DefineComponent<infer P, any, any, any> ? P : unknown
 >
 
 /*! #__NO_SIDE_EFFECTS__ */