fix: make inferring from runtime props possible in case props types aren't specified

Author: danil.nemov

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

@@ -2,6 +2,7 @@ import {
   type Component,
   type ComponentOptions,
   type ComponentPublicInstance,
+  type DefineSetupFnComponent,
   type PropType,
   type SetupContext,
   type Slots,
@@ -1411,6 +1412,14 @@ describe('function syntax w/ runtime props', () => {
     },
   )
 
+  expectType<JSX.Element>(<Comp1 msg="1" />)
+  // @ts-expect-error msg type is incorrect
+  expectType<JSX.Element>(<Comp1 msg={1} />)
+  // @ts-expect-error msg is missing
+  expectType<JSX.Element>(<Comp1 />)
+  // @ts-expect-error bar doesn't exist
+  expectType<JSX.Element>(<Comp1 msg="1" bar="2" />)
+
   // @ts-expect-error bar isn't specified in props definition
   defineComponent(
     (_props: { msg: string }) => {
@@ -1430,13 +1439,15 @@ describe('function syntax w/ runtime props', () => {
     },
   )
 
-  expectType<JSX.Element>(<Comp1 msg="1" />)
-  // @ts-expect-error msg type is incorrect
-  expectType<JSX.Element>(<Comp1 msg={1} />)
-  // @ts-expect-error msg is missing
-  expectType<JSX.Element>(<Comp1 />)
-  // @ts-expect-error bar doesn't exist
-  expectType<JSX.Element>(<Comp1 msg="1" bar="2" />)
+  // @ts-expect-error string prop names don't match
+  defineComponent(
+    (_props: { msg: string }) => {
+      return () => {}
+    },
+    {
+      props: ['bar'],
+    },
+  )
 
   const Comp2 = defineComponent(
     <T extends string>(_props: { msg: T }) => {
@@ -1447,8 +1458,16 @@ describe('function syntax w/ runtime props', () => {
     },
   )
 
-  // @ts-expect-error bar isn't specified in props definition
-  defineComponent(
+  expectType<JSX.Element>(<Comp2 msg="1" />)
+  expectType<JSX.Element>(<Comp2<string> msg="1" />)
+  // @ts-expect-error msg type is incorrect
+  expectType<JSX.Element>(<Comp2 msg={1} />)
+  // @ts-expect-error msg is missing
+  expectType<JSX.Element>(<Comp2 />)
+  // @ts-expect-error bar doesn't exist
+  expectType<JSX.Element>(<Comp2 msg="1" bar="2" />)
+
+  const Comp3 = defineComponent(
     <T extends string>(_props: { msg: T }) => {
       return () => {}
     },
@@ -1457,6 +1476,12 @@ describe('function syntax w/ runtime props', () => {
     },
   )
 
+  // This is not the preferred behavior because it's better to see a typescript error,
+  // but this is a compromise to resolve a relatively worse problem -
+  // not inferring props types from runtime props when the types are not explicitly set.
+  // See #13119#discussion_r2137831991
+  expectType<DefineSetupFnComponent<{ msg: any; bar: any }>>(Comp3)
+
   defineComponent(
     <T extends string>(_props: { msg: T; bar: T }) => {
       return () => {}
@@ -1466,17 +1491,9 @@ describe('function syntax w/ runtime props', () => {
     },
   )
 
-  expectType<JSX.Element>(<Comp2 msg="1" />)
-  expectType<JSX.Element>(<Comp2<string> msg="1" />)
-  // @ts-expect-error msg type is incorrect
-  expectType<JSX.Element>(<Comp2 msg={1} />)
-  // @ts-expect-error msg is missing
-  expectType<JSX.Element>(<Comp2 />)
-  // @ts-expect-error bar doesn't exist
-  expectType<JSX.Element>(<Comp2 msg="1" bar="2" />)
-
   // Note: generics aren't supported with object runtime props
-  const Comp3 = defineComponent(
+  // so the props will infer the runtime props' types
+  const Comp4 = defineComponent(
     <T extends string>(_props: { msg: T }) => {
       return () => {}
     },
@@ -1487,6 +1504,17 @@ describe('function syntax w/ runtime props', () => {
     },
   )
 
+  expectType<DefineSetupFnComponent<{ msg: string }>>(Comp4)
+  expectType<JSX.Element>(<Comp4 msg="1" />)
+  // @ts-expect-error generics aren't supported with object runtime props
+  expectType<JSX.Element>(<Comp4<string> msg="1" />)
+  // @ts-expect-error msg type is incorrect
+  expectType<JSX.Element>(<Comp4 msg={1} />)
+  // @ts-expect-error msg is missing
+  expectType<JSX.Element>(<Comp4 />)
+  // @ts-expect-error bar doesn't exist
+  expectType<JSX.Element>(<Comp4 msg="1" bar="2" />)
+
   defineComponent(
     // @ts-expect-error bar isn't specified in props definition
     <T extends string>(_props: { msg: T }) => {
@@ -1500,46 +1528,35 @@ describe('function syntax w/ runtime props', () => {
   )
 
   defineComponent(
-    // @ts-expect-error generics aren't supported with object runtime props
-    <T extends string>(_props: { msg: T; bar: T }) => {
+    (_props: { msg: string }) => {
       return () => {}
     },
     {
       props: {
-        msg: String,
+        // @ts-expect-error prop type mismatch
+        msg: Number,
       },
     },
   )
 
-  expectType<JSX.Element>(<Comp3 msg="1" />)
-  // @ts-expect-error generics aren't supported with object runtime props
-  expectType<JSX.Element>(<Comp3<string> msg="1" />)
-  // @ts-expect-error msg type is incorrect
-  expectType<JSX.Element>(<Comp3 msg={1} />)
-  // @ts-expect-error msg is missing
-  expectType<JSX.Element>(<Comp3 />)
-  // @ts-expect-error bar doesn't exist
-  expectType<JSX.Element>(<Comp3 msg="1" bar="2" />)
-
-  // @ts-expect-error string prop names don't match
-  defineComponent(
-    (_props: { msg: string }) => {
+  const Comp5 = defineComponent(
+    _props => {
       return () => {}
     },
     {
-      props: ['bar'],
+      props: ['foo'],
     },
   )
 
+  expectType<DefineSetupFnComponent<{ foo: any }>>(Comp5)
+
   defineComponent(
-    (_props: { msg: string }) => {
+    // @ts-expect-error the props type is required when a generic type is present
+    <T,>(_props) => {
       return () => {}
     },
     {
-      props: {
-        // @ts-expect-error prop type mismatch
-        msg: Number,
-      },
+      props: [],
     },
   )
 })

packages/runtime-core/src/apiDefineComponent.ts

@@ -146,6 +146,22 @@ type ToResolvedProps<Props, Emits extends EmitsOptions> = Readonly<Props> &
 
 // overload 1: direct setup function
 // (uses user defined props interface)
+export function defineComponent<
+  Props extends Record<string, any>,
+  E extends EmitsOptions = {},
+  EE extends string = string,
+  S extends SlotsType = {},
+>(
+  setup: (
+    props: Props,
+    ctx: SetupContext<E, S>,
+  ) => RenderFunction | Promise<RenderFunction>,
+  options?: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
+    props?: (keyof Props)[]
+    emits?: E | EE[]
+    slots?: S
+  },
+): DefineSetupFnComponent<Props, E, S>
 export function defineComponent<
   Props extends Record<string, any>,
   E extends EmitsOptions = {},