fix(types): props type is incompatible with setup returned type

Author: rudyxu1102

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

@@ -1346,22 +1346,20 @@ describe('function syntax w/ runtime props', () => {
     <T extends string>(_props: { msg: T }) => {
       return () => {}
     },
-    {
-      props: {
-        msg: String
+    setup(props) {
+      expectType<SizeType>(props.size)
+      return {
+        size: 1
       }
     }
-  )
+  })
+  type CompInstance = InstanceType<typeof Comp>
 
-  // @ts-expect-error string prop names don't match
-  defineComponent(
-    (_props: { msg: string }) => {
-      return () => {}
-    },
-    {
-      props: ['bar']
-    }
-  )
+  const CompA = {} as CompInstance
+  expectType<ComponentPublicInstance>(CompA)
+  expectType<number>(CompA.size)
+  expectType<SizeType>(CompA.$props.size)
+})
 
   defineComponent(
     (_props: { msg: string }) => {
@@ -1372,21 +1370,20 @@ describe('function syntax w/ runtime props', () => {
         // @ts-expect-error prop type mismatch
         msg: Number
       }
-    }
-  )
-
-  // @ts-expect-error prop keys don't match
-  defineComponent(
-    (_props: { msg: string }, ctx) => {
-      return () => {}
     },
-    {
-      props: {
-        msg: String,
-        bar: String
+    setup(props) {
+      expectType<SizeType>(props.size)
+      return {
+        size: 1
       }
     }
-  )
+  })
+  type CompInstance = InstanceType<typeof Comp>
+
+  const CompA = {} as CompInstance
+  expectType<ComponentPublicInstance>(CompA)
+  expectType<number>(CompA.size)
+  expectType<SizeType>(CompA.$props.size)
 })
 
 // check if defineComponent can be exported
@@ -1472,6 +1469,31 @@ describe('slots', () => {
   expectType<Slots | undefined>(new comp2().$slots)
 })
 
+// #5885
+describe('should work when props type is incompatible with setup returned type ', () => {
+  type SizeType = 'small' | 'big'
+  const Comp = defineComponent({
+    props: {
+      size: {
+        type: String as PropType<SizeType>,
+        required: true
+      }
+    },
+    setup(props) {
+      expectType<SizeType>(props.size)
+      return {
+        size: 1
+      }
+    }
+  })
+  type CompInstance = InstanceType<typeof Comp>
+
+  const CompA = {} as CompInstance
+  expectType<ComponentPublicInstance>(CompA)
+  expectType<number>(CompA.size)
+  expectType<SizeType>(CompA.$props.size)
+})
+
 import {
   DefineComponent,
   ComponentOptionsMixin,

packages/runtime-core/src/apiDefineComponent.ts

@@ -70,8 +70,7 @@ export type DefineComponent<
     true,
     {},
     S
-  > &
-    Props
+  >
 > &
   ComponentOptionsBase<
     Props,

packages/runtime-core/src/componentPublicInstance.ts

@@ -15,7 +15,8 @@ import {
   isString,
   isFunction,
   UnionToIntersection,
-  Prettify
+  Prettify,
+  IfAny
 } from '@vue/shared'
 import {
   toRaw,
@@ -187,7 +188,6 @@ export type CreateComponentPublicInstance<
   I,
   S
 >
-
 // public properties exposed on the proxy, which is used as the render context
 // in templates (as `this` in the render option)
 export type ComponentPublicInstance<
@@ -228,7 +228,7 @@ export type ComponentPublicInstance<
       : (...args: any) => any,
     options?: WatchOptions
   ): WatchStopHandle
-} & P &
+} & IfAny<P, P, Omit<P, keyof ShallowUnwrapRef<B>>> &
   ShallowUnwrapRef<B> &
   UnwrapNestedRefs<D> &
   ExtractComputedReturns<C> &