fix(types): fix shallowRef return type with union value type (#7853)

close #7852

Author: simlevesque

Diff for: packages/dts-test/ref.test-d.ts

@@ -15,9 +15,10 @@ import {
   MaybeRef,
   MaybeRefOrGetter,
   ComputedRef,
-  computed
+  computed,
+  ShallowRef
 } from 'vue'
-import { expectType, describe } from './utils'
+import { expectType, describe, IsUnion } from './utils'
 
 function plainType(arg: number | Ref<number>) {
   // ref coercing
@@ -174,6 +175,27 @@ if (refStatus.value === 'initial') {
   refStatus.value = 'invalidating'
 }
 
+{
+  const shallow = shallowRef(1)
+  expectType<Ref<number>>(shallow)
+  expectType<ShallowRef<number>>(shallow)
+}
+
+{
+  //#7852
+  type Steps = { step: '1' } | { step: '2' }
+  const shallowUnionGenParam = shallowRef<Steps>({ step: '1' })
+  const shallowUnionAsCast = shallowRef({ step: '1' } as Steps)
+
+  expectType<IsUnion<typeof shallowUnionGenParam>>(false)
+  expectType<IsUnion<typeof shallowUnionAsCast>>(false)
+}
+
+describe('shallowRef with generic', <T>() => {
+  const r = ref({}) as MaybeRef<T>
+  expectType<ShallowRef<T> | Ref<T>>(shallowRef(r))
+})
+
 // proxyRefs: should return `reactive` directly
 const r1 = reactive({
   k: 'v'

Diff for: packages/dts-test/watch.test-d.ts

@@ -1,4 +1,4 @@
-import { ref, computed, watch, defineComponent } from 'vue'
+import { ref, computed, watch, defineComponent, shallowRef } from 'vue'
 import { expectType } from './utils'
 
 const source = ref('foo')
@@ -92,3 +92,17 @@ defineComponent({
     )
   }
 })
+
+{
+  //#7852
+  type Steps = { step: '1' } | { step: '2' }
+  const shallowUnionGenParam = shallowRef<Steps>({ step: '1' })
+  const shallowUnionAsCast = shallowRef({ step: '1' } as Steps)
+
+  watch(shallowUnionGenParam, value => {
+    expectType<Steps>(value)
+  })
+  watch(shallowUnionAsCast, value => {
+    expectType<Steps>(value)
+  })
+}

Diff for: packages/reactivity/src/ref.ts

@@ -115,9 +115,8 @@ export type ShallowRef<T = any> = Ref<T> & { [ShallowRefMarker]?: true }
  * @param value - The "inner value" for the shallow ref.
  * @see {@link https://vuejs.org/api/reactivity-advanced.html#shallowref}
  */
-export function shallowRef<T extends object>(
-  value: T
-): T extends Ref ? T : ShallowRef<T>
+export function shallowRef<T>(value: MaybeRef<T>): Ref<T> | ShallowRef<T>
+export function shallowRef<T extends Ref>(value: T): T
 export function shallowRef<T>(value: T): ShallowRef<T>
 export function shallowRef<T = any>(): ShallowRef<T | undefined>
 export function shallowRef(value?: unknown) {