refactor(types/ref): update MaybeRef to include all ref-like types (#11379)

Co-authored-by: Evan You <[email protected]>

Author: jh-leong

packages/dts-test/ref.test-d.ts

@@ -5,6 +5,7 @@ import {
   type Ref,
   type ShallowRef,
   type ToRefs,
+  type WritableComputedRef,
   computed,
   isRef,
   proxyRefs,
@@ -465,8 +466,21 @@ describe('toRef <-> toValue', () => {
 })
 
 // unref
-declare const text: ShallowRef<string> | ComputedRef<string> | MaybeRef<string>
-expectType<string>(unref(text))
+// #8747
+declare const unref1: number | Ref<number> | ComputedRef<number>
+expectType<number>(unref(unref1))
+
+// #11356
+declare const unref2:
+  | MaybeRef<string>
+  | ShallowRef<string>
+  | ComputedRef<string>
+  | WritableComputedRef<string>
+expectType<string>(unref(unref2))
+
+// toValue
+expectType<number>(toValue(unref1))
+expectType<string>(toValue(unref2))
 
 // useTemplateRef
 const tRef = useTemplateRef('foo')

packages/reactivity/src/ref.ts

@@ -16,7 +16,7 @@ import {
   toRaw,
   toReactive,
 } from './reactive'
-import type { ComputedRef } from './computed'
+import type { ComputedRef, WritableComputedRef } from './computed'
 import { ReactiveFlags, TrackOpTypes, TriggerOpTypes } from './constants'
 import { warn } from './warning'
 
@@ -192,8 +192,13 @@ export function triggerRef(ref: Ref) {
   }
 }
 
-export type MaybeRef<T = any> = T | Ref<T>
-export type MaybeRefOrGetter<T = any> = MaybeRef<T> | (() => T)
+export type MaybeRef<T = any> =
+  | T
+  | Ref<T>
+  | ShallowRef<T>
+  | WritableComputedRef<T>
+
+export type MaybeRefOrGetter<T = any> = MaybeRef<T> | ComputedRef<T> | (() => T)
 
 /**
  * Returns the inner value if the argument is a ref, otherwise return the
@@ -211,7 +216,7 @@ export type MaybeRefOrGetter<T = any> = MaybeRef<T> | (() => T)
  * @param ref - Ref or plain value to be converted into the plain value.
  * @see {@link https://vuejs.org/api/reactivity-utilities.html#unref}
  */
-export function unref<T>(ref: MaybeRef<T> | ComputedRef<T> | ShallowRef<T>): T {
+export function unref<T>(ref: MaybeRef<T> | ComputedRef<T>): T {
   return isRef(ref) ? ref.value : ref
 }
 
@@ -231,9 +236,7 @@ export function unref<T>(ref: MaybeRef<T> | ComputedRef<T> | ShallowRef<T>): T {
  * @param source - A getter, an existing ref, or a non-function value.
  * @see {@link https://vuejs.org/api/reactivity-utilities.html#tovalue}
  */
-export function toValue<T>(
-  source: MaybeRefOrGetter<T> | ComputedRef<T> | ShallowRef<T>,
-): T {
+export function toValue<T>(source: MaybeRefOrGetter<T>): T {
   return isFunction(source) ? source() : unref(source)
 }