fix(types): fix generic inference in defineComponent

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

@@ -1364,6 +1364,29 @@ describe('function syntax w/ generics', () => {
     // @ts-expect-error generics don't match
     <Comp msg={123} list={['123']} />,
   )
+
+  const CompWithProps = defineComponent(
+    <T extends string | number>(props: { msg: T; list: T[] }) => {
+      const count = ref(0)
+      return () => (
+        <div>
+          {props.msg} {count.value}
+        </div>
+      )
+    },
+    { props: ['msg', 'list'] },
+  )
+
+  expectType<JSX.Element>(<CompWithProps msg="hello" list={['world']} />)
+  expectType<JSX.Element>(<CompWithProps msg={123} list={[456]} />)
+
+  expectType<JSX.Element>(
+    // @ts-expect-error missing prop
+    <CompWithProps msg={123} />,
+  )
+
+  expectType<JSX.Element>(<CompWithProps msg="hello" list={[123]} />)
+  expectType<JSX.Element>(<CompWithProps msg={123} list={['hello']} />)
 })
 
 describe('function syntax w/ emits', () => {
@@ -1431,7 +1454,6 @@ describe('function syntax w/ runtime props', () => {
     },
   )
 
-  // @ts-expect-error string prop names don't match
   defineComponent(
     (_props: { msg: string }) => {
       return () => {}

packages/runtime-core/__tests__/defineComponentGeneric.spec.ts

@@ -0,0 +1,151 @@
+/**
+ * @vitest-environment jsdom
+ */
+import {
+  defineComponent,
+  h,
+  nodeOps,
+  ref,
+  render,
+  serializeInner,
+} from '@vue/runtime-test'
+import { describe, expect, test } from 'vitest'
+
+describe('defineComponent with generic functions', () => {
+  test('should preserve type inference for generic functions with props option', () => {
+    const GenericComp = defineComponent(
+      <T extends string | number>(props: { value: T; items: T[] }) => {
+        const count = ref(0)
+        return () =>
+          h('div', `${props.value}-${props.items.length}-${count.value}`)
+      },
+      { props: ['value', 'items'] },
+    )
+
+    expect(typeof GenericComp).toBe('object')
+    expect(GenericComp).toBeDefined()
+
+    const root1 = nodeOps.createElement('div')
+    render(h(GenericComp, { value: 'hello', items: ['world'] }), root1)
+    expect(serializeInner(root1)).toBe(`<div>hello-1-0</div>`)
+
+    const root2 = nodeOps.createElement('div')
+    render(h(GenericComp, { value: 42, items: [1, 2, 3] }), root2)
+    expect(serializeInner(root2)).toBe(`<div>42-3-0</div>`)
+  })
+
+  test('should work with complex generic constraints', () => {
+    interface BaseType {
+      id: string
+      name?: string
+    }
+
+    const ComplexGenericComp = defineComponent(
+      <T extends BaseType>(props: { item: T; list: T[] }) => {
+        return () => h('div', `${props.item.id}-${props.list.length}`)
+      },
+      { props: ['item', 'list'] },
+    )
+
+    expect(typeof ComplexGenericComp).toBe('object')
+
+    const root = nodeOps.createElement('div')
+    render(
+      h(ComplexGenericComp, {
+        item: { id: '1', name: 'test' },
+        list: [
+          { id: '1', name: 'test' },
+          { id: '2', name: 'test2' },
+        ],
+      }),
+      root,
+    )
+    expect(serializeInner(root)).toBe(`<div>1-2</div>`)
+  })
+
+  test('should work with emits option', () => {
+    const GenericCompWithEmits = defineComponent(
+      <T extends string | number>(props: { value: T }, { emit }: any) => {
+        const handleClick = () => {
+          emit('update', props.value)
+        }
+        return () => h('div', { onClick: handleClick }, String(props.value))
+      },
+      {
+        props: ['value'],
+        emits: ['update'],
+      },
+    )
+
+    expect(typeof GenericCompWithEmits).toBe('object')
+
+    const root = nodeOps.createElement('div')
+    render(h(GenericCompWithEmits, { value: 'test' }), root)
+    expect(serializeInner(root)).toBe(`<div>test</div>`)
+  })
+
+  test('should maintain backward compatibility with non-generic functions', () => {
+    const RegularComp = defineComponent(
+      (props: { message: string }) => {
+        return () => h('div', props.message)
+      },
+      { props: ['message'] },
+    )
+
+    expect(typeof RegularComp).toBe('object')
+
+    const root = nodeOps.createElement('div')
+    render(h(RegularComp, { message: 'hello' }), root)
+    expect(serializeInner(root)).toBe(`<div>hello</div>`)
+  })
+
+  test('should work with union types in generics', () => {
+    const UnionGenericComp = defineComponent(
+      <T extends 'small' | 'medium' | 'large'>(props: { size: T }) => {
+        return () => h('div', props.size)
+      },
+      { props: ['size'] },
+    )
+
+    expect(typeof UnionGenericComp).toBe('object')
+
+    const root1 = nodeOps.createElement('div')
+    render(h(UnionGenericComp, { size: 'small' }), root1)
+    expect(serializeInner(root1)).toBe(`<div>small</div>`)
+
+    const root2 = nodeOps.createElement('div')
+    render(h(UnionGenericComp, { size: 'large' }), root2)
+    expect(serializeInner(root2)).toBe(`<div>large</div>`)
+  })
+
+  test('should work with array generics', () => {
+    const ArrayGenericComp = defineComponent(
+      <T>(props: { items: T[]; selectedItem: T }) => {
+        return () => h('div', `${props.items.length}-${props.selectedItem}`)
+      },
+      { props: ['items', 'selectedItem'] },
+    )
+
+    expect(typeof ArrayGenericComp).toBe('object')
+
+    const root1 = nodeOps.createElement('div')
+    render(
+      h(ArrayGenericComp, {
+        items: ['a', 'b', 'c'],
+        selectedItem: 'a',
+      }),
+      root1,
+    )
+    expect(serializeInner(root1)).toBe(`<div>3-a</div>`)
+
+    const root2 = nodeOps.createElement('div')
+    render(
+      h(ArrayGenericComp, {
+        items: [1, 2, 3],
+        selectedItem: 1,
+      }),
+      root2,
+    )
+    expect(serializeInner(root2)).toBe(`<div>3-1</div>`)
+  })
+})

packages/runtime-core/src/apiDefineComponent.ts

@@ -179,6 +179,25 @@ export function defineComponent<
   },
 ): DefineSetupFnComponent<Props, E, S>
 
+// overload for generic setup functions with props option
+export function defineComponent<
+  F extends (props: any, ctx?: SetupContext<any, any>) => any,
+  E extends EmitsOptions = {},
+  EE extends string = string,
+  S extends SlotsType = {},
+>(
+  setup: F,
+  options?: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
+    props?: string[]
+    emits?: E | EE[]
+    slots?: S
+  },
+): F extends (props: infer P, ...args: any[]) => any
+  ? P extends Record<string, any>
+    ? DefineSetupFnComponent<P, E, S>
+    : never
+  : never
+
 // overload 2: defineComponent with options object, infer props from options
 export function defineComponent<
   // props