feat(types): enhanced defineComponent inference

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

@@ -321,11 +321,9 @@ describe('with object props', () => {
       myProp: {
         type: Number,
         validator(val: unknown): boolean {
-          // @ts-expect-error
           return val !== this.otherProp
         },
         default(): number {
-          // @ts-expect-error
           return this.otherProp + 1
         },
       },
@@ -1062,7 +1060,7 @@ describe('emits', () => {
   })
 
   // emit should be valid when ComponentPublicInstance is used.
-  const instance = {} as ComponentPublicInstance
+  const instance = {} as ComponentPublicInstance<{}, {}, {}, {}, {}, string[]>
   instance.$emit('test', 1)
   instance.$emit('test')
 
@@ -1261,7 +1259,7 @@ describe('should allow to assign props', () => {
 
   const Parent = defineComponent({
     props: {
-      ...Child.props,
+      ...Child.props!,
       foo: String,
     },
   })
@@ -1638,37 +1636,17 @@ describe('expose typing', () => {
 })
 
 import type {
-  AllowedComponentProps,
-  ComponentCustomProps,
   ComponentInstance,
-  ComponentOptionsMixin,
   DefineComponent,
   Directive,
-  EmitsOptions,
-  ExtractPropTypes,
   KeepAliveProps,
   TransitionProps,
-  VNodeProps,
   vShow,
 } from 'vue'
 
 // code generated by tsc / vue-tsc, make sure this continues to work
 // so we don't accidentally change the args order of DefineComponent
-declare const MyButton: DefineComponent<
-  {},
-  () => JSX.Element,
-  {},
-  {},
-  {},
-  ComponentOptionsMixin,
-  ComponentOptionsMixin,
-  EmitsOptions,
-  string,
-  VNodeProps & AllowedComponentProps & ComponentCustomProps,
-  Readonly<ExtractPropTypes<{}>>,
-  {},
-  {}
->
+declare const MyButton: DefineComponent<{}, () => JSX.Element>
 ;<MyButton class="x" />
 
 describe('__typeProps backdoor for union type for conditional props', () => {
@@ -1852,7 +1830,7 @@ interface ErrorMessageSlotProps {
  * relying on legacy CreateComponentPublicInstance signature
  */
 declare const ErrorMessage: {
-  new (...args: any[]): vue.CreateComponentPublicInstance<
+  new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<
     Readonly<
       vue.ExtractPropTypes<{
         as: {
@@ -1893,8 +1871,8 @@ declare const ErrorMessage: {
     unknown,
     {},
     {},
-    vue.ComponentOptionsMixin,
-    vue.ComponentOptionsMixin,
+    {},
+    {},
     {},
     vue.VNodeProps &
       vue.AllowedComponentProps &
@@ -1916,58 +1894,7 @@ declare const ErrorMessage: {
     },
     true,
     {},
-    {},
-    {
-      P: {}
-      B: {}
-      D: {}
-      C: {}
-      M: {}
-      Defaults: {}
-    },
-    Readonly<
-      vue.ExtractPropTypes<{
-        as: {
-          type: StringConstructor
-          default: any
-        }
-        name: {
-          type: StringConstructor
-          required: true
-        }
-      }>
-    >,
-    () =>
-      | VNode<
-          vue.RendererNode,
-          vue.RendererElement,
-          {
-            [key: string]: any
-          }
-        >
-      | vue.Slot<any>
-      | VNode<
-          vue.RendererNode,
-          vue.RendererElement,
-          {
-            [key: string]: any
-          }
-        >[]
-      | {
-          default: () => VNode<
-            vue.RendererNode,
-            vue.RendererElement,
-            {
-              [key: string]: any
-            }
-          >[]
-        },
-    {},
-    {},
-    {},
-    {
-      as: string
-    }
+    {}
   >
   __isFragment?: never
   __isTeleport?: never
@@ -2013,8 +1940,8 @@ declare const ErrorMessage: {
   unknown,
   {},
   {},
-  vue.ComponentOptionsMixin,
-  vue.ComponentOptionsMixin,
+  {},
+  {},
   {},
   string,
   {

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

@@ -59,14 +59,14 @@ expectType<JSX.Element>(<Bar foo={1} onUpdate={() => {}} />)
 //  @ts-expect-error
 ;<Foo baz="bar" />
 
-const Baz: FunctionalComponent<{}, string[]> = (props, { emit }) => {
+const Baz: FunctionalComponent = (props, { emit }) => {
   expectType<{}>(props)
   expectType<(event: string) => void>(emit)
 }
 
 expectType<Component>(Baz)
 
-const Qux: FunctionalComponent<{}, ['foo', 'bar']> = (props, { emit }) => {
+const Qux: FunctionalComponent<{}, ('foo' | 'bar')[]> = (props, { emit }) => {
   emit('foo')
   emit('foo', 1, 2)
   emit('bar')
@@ -77,7 +77,7 @@ expectType<Component>(Qux)
 
 const Quux: FunctionalComponent<
   {},
-  {},
+  string[],
   {
     default: { foo: number }
     optional?: { foo: number }

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

@@ -3,6 +3,7 @@
  */
 import type { Mock } from 'vitest'
 import {
+  type ComponentOptions,
   type TestElement,
   computed,
   createApp,
@@ -1060,7 +1061,7 @@ describe('api: options', () => {
       },
       data() {
         return {
-          plusOne: (this as any).count + 1,
+          plusOne: this.count + 1,
         }
       },
       computed: {
@@ -1414,7 +1415,7 @@ describe('api: options', () => {
     })
 
     test('computed with setter and no getter', () => {
-      const Comp = {
+      const Comp: ComponentOptions = {
         computed: {
           foo: {
             set() {},
@@ -1430,7 +1431,7 @@ describe('api: options', () => {
 
     test('assigning to computed with no setter', () => {
       let instance: any
-      const Comp = {
+      const Comp: ComponentOptions = {
         computed: {
           foo: {
             get() {},
@@ -1482,7 +1483,7 @@ describe('api: options', () => {
     })
 
     test('methods property is not a function', () => {
-      const Comp = {
+      const Comp: ComponentOptions = {
         methods: {
           foo: 1,
         },

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

@@ -152,8 +152,11 @@ describe('component props', () => {
     render(
       h(Comp, {
         // absent should cast to false
+        // @ts-expect-error
         bar: '', // empty string should cast to true
+        // @ts-expect-error
         baz: 'baz', // same string should cast to true
+        // @ts-expect-error
         qux: 'ok', // other values should be left in-tact (but raise warning)
       }),
       nodeOps.createElement('div'),
@@ -206,17 +209,42 @@ describe('component props', () => {
     expect(proxy.bar).toBe(prevBar)
     expect(defaultFn).toHaveBeenCalledTimes(1)
 
-    render(h(Comp, { bar: { b: 2 } }), root)
+    render(
+      h(Comp, {
+        bar: {
+          // @ts-expect-error
+          b: 2,
+        },
+      }),
+      root,
+    )
     expect(proxy.foo).toBe(1)
     expect(proxy.bar).toEqual({ b: 2 })
     expect(defaultFn).toHaveBeenCalledTimes(1)
 
-    render(h(Comp, { foo: 3, bar: { b: 3 } }), root)
+    render(
+      h(Comp, {
+        foo: 3,
+        bar: {
+          // @ts-expect-error
+          b: 3,
+        },
+      }),
+      root,
+    )
     expect(proxy.foo).toBe(3)
     expect(proxy.bar).toEqual({ b: 3 })
     expect(defaultFn).toHaveBeenCalledTimes(1)
 
-    render(h(Comp, { bar: { b: 4 } }), root)
+    render(
+      h(Comp, {
+        bar: {
+          // @ts-expect-error
+          b: 4,
+        },
+      }),
+      root,
+    )
     expect(proxy.foo).toBe(1)
     expect(proxy.bar).toEqual({ b: 4 })
     expect(defaultFn).toHaveBeenCalledTimes(1)
@@ -420,13 +448,19 @@ describe('component props', () => {
     }
     render(
       h(Comp, {
+        // @ts-expect-error
         bool: 'true',
+        // @ts-expect-error
         str: 100,
+        // @ts-expect-error
         num: '100',
+        // @ts-expect-error
         arr: {},
         obj: 'false',
         cls: {},
+        // @ts-expect-error
         fn: true,
+        // @ts-expect-error
         skipCheck: 'foo',
         empty: [1, 2, 3],
       }),