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

rudyxu1102 · rudyxu1102 · commit d538fd27f8f5 · 2022-12-13T23:36:34.000+08:00
diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts
@@ -62,8 +62,7 @@ export type DefineComponent<
     PP & Props,
     Defaults,
     true
-  > &
-    Props
+  >
 > &
   ComponentOptionsBase<
     Props,
diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
@@ -14,7 +14,8 @@ import {
   extend,
   isString,
   isFunction,
-  UnionToIntersection
+  UnionToIntersection,
+  IfAny
 } from '@vue/shared'
 import {
   toRaw,
@@ -167,7 +168,6 @@ export type CreateComponentPublicInstance<
   ComponentOptionsBase<P, B, D, C, M, Mixin, Extends, E, string, Defaults>,
   I
 >
-
 // public properties exposed on the proxy, which is used as the render context
 // in templates (as `this` in the render option)
 export type ComponentPublicInstance<
@@ -205,7 +205,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> &
diff --git a/test-dts/defineComponent.test-d.tsx b/test-dts/defineComponent.test-d.tsx
@@ -1041,13 +1041,13 @@ describe('inject', () => {
     },
     inject: {
       foo: 'foo',
-      bar: 'bar',
+      bar: 'bar'
     },
     created() {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
-      expectError(this.foobar = 1)
+      expectError((this.foobar = 1))
     }
   })
 
@@ -1059,7 +1059,7 @@ describe('inject', () => {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
-      expectError(this.foobar = 1)
+      expectError((this.foobar = 1))
     }
   })
 
@@ -1073,13 +1073,13 @@ describe('inject', () => {
       bar: {
         from: 'pbar',
         default: 'bar'
-      },
+      }
     },
     created() {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
-      expectError(this.foobar = 1)
+      expectError((this.foobar = 1))
     }
   })
 
@@ -1088,9 +1088,9 @@ describe('inject', () => {
     props: ['a', 'b'],
     created() {
       //  @ts-expect-error
-      expectError(this.foo = 1)
+      expectError((this.foo = 1))
       //  @ts-expect-error
-      expectError(this.bar = 1)
+      expectError((this.bar = 1))
     }
   })
 })
@@ -1257,6 +1257,30 @@ describe('prop starting with `on*` is broken', () => {
   })
 })
 
+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)
+})
+
 // check if defineComponent can be exported
 export default {
   // function components
