From c64907d261bafd763b90e493d1bc0ad19869366f Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Fri, 21 Jan 2022 15:33:30 +0800
Subject: [PATCH] fix(types): calling readonly() with ref() should return
 Readonly<Ref<T>> (#5212)

---
 packages/reactivity/__tests__/readonly.spec.ts | 3 ++-
 packages/reactivity/src/reactive.ts            | 2 +-
 test-dts/ref.test-d.ts                         | 6 +++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/reactivity/__tests__/readonly.spec.ts b/packages/reactivity/__tests__/readonly.spec.ts
index 72a873a016e..4462061b3a9 100644
--- a/packages/reactivity/__tests__/readonly.spec.ts
+++ b/packages/reactivity/__tests__/readonly.spec.ts
@@ -438,7 +438,8 @@ describe('reactivity/readonly', () => {
   })
 
   test('should make ref readonly', () => {
-    const n: any = readonly(ref(1))
+    const n = readonly(ref(1))
+    // @ts-expect-error
     n.value = 2
     expect(n.value).toBe(1)
     expect(
diff --git a/packages/reactivity/src/reactive.ts b/packages/reactivity/src/reactive.ts
index 7d7e591fc4a..f160b21110d 100644
--- a/packages/reactivity/src/reactive.ts
+++ b/packages/reactivity/src/reactive.ts
@@ -141,7 +141,7 @@ export type DeepReadonly<T> = T extends Builtin
   : T extends Promise<infer U>
   ? Promise<DeepReadonly<U>>
   : T extends Ref<infer U>
-  ? Ref<DeepReadonly<U>>
+  ? Readonly<Ref<DeepReadonly<U>>>
   : T extends {}
   ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
   : Readonly<T>
diff --git a/test-dts/ref.test-d.ts b/test-dts/ref.test-d.ts
index e585470d5e4..bc1deb05863 100644
--- a/test-dts/ref.test-d.ts
+++ b/test-dts/ref.test-d.ts
@@ -10,7 +10,8 @@ import {
   toRef,
   toRefs,
   ToRefs,
-  shallowReactive
+  shallowReactive,
+  readonly
 } from './index'
 
 function plainType(arg: number | Ref<number>) {
@@ -236,6 +237,9 @@ expectType<Ref<string>>(p2.obj.k)
   expectType<Ref<number>>(x)
 }
 
+// readonly() + ref()
+expectType<Readonly<Ref<number>>>(readonly(ref(1)))
+
 // #2687
 interface AppData {
   state: 'state1' | 'state2' | 'state3'