types: improve ref sugar $computed typing

packages/runtime-core/src/helpers/refSugar.ts

@@ -1,4 +1,12 @@
-import { Ref, UnwrapRef, ShallowUnwrapRef, ComputedRef } from '@vue/reactivity'
+import {
+  Ref,
+  UnwrapRef,
+  ShallowUnwrapRef,
+  ComputedRef,
+  WritableComputedOptions,
+  DebuggerOptions,
+  WritableComputedRef
+} from '@vue/reactivity'
 
 export function $ref<T>(arg: T | Ref<T>): UnwrapRef<T>
 export function $ref() {}
@@ -8,9 +16,19 @@ export function $shallowRef<T>(arg: T): T {
 }
 
 declare const ComputedRefMarker: unique symbol
-type ComputedRefValue<T> = T & { [ComputedRefMarker]?: any }
+type ComputedValue<T> = T & { [ComputedRefMarker]?: any }
 
-export function $computed<T>(getter: () => T): ComputedRefValue<T>
+declare const WritableComputedRefMarker: unique symbol
+type WritableComputedValue<T> = T & { [WritableComputedRefMarker]?: any }
+
+export function $computed<T>(
+  getter: () => T,
+  debuggerOptions?: DebuggerOptions
+): ComputedValue<T>
+export function $computed<T>(
+  options: WritableComputedOptions<T>,
+  debuggerOptions?: DebuggerOptions
+): WritableComputedValue<T>
 export function $computed() {}
 
 export function $fromRefs<T>(source: T): ShallowUnwrapRef<T>
@@ -18,7 +36,8 @@ export function $fromRefs() {
   return null as any
 }
 
-export function $raw<T>(value: ComputedRefValue<T>): ComputedRef<T>
+export function $raw<T>(value: ComputedValue<T>): ComputedRef<T>
+export function $raw<T>(value: WritableComputedValue<T>): WritableComputedRef<T>
 export function $raw<T>(value: T): Ref<T>
 export function $raw() {
   return null as any

test-dts/refSugar.test-d.ts

@@ -1,3 +1,4 @@
+import { WritableComputedRef } from '@vue/reactivity'
 import {
   expectType,
   $ref,
@@ -22,7 +23,19 @@ expectType<{ foo: Ref<number> }>($shallowRef({ foo: ref(1) }))
 // $computed
 expectType<number>($computed(() => 1))
 let b = $ref(1)
-expectType<number>($computed(() => b))
+expectType<number>(
+  $computed(() => b, {
+    onTrack() {}
+  })
+)
+
+// writable computed
+expectType<number>(
+  $computed({
+    get: () => 1,
+    set: () => {}
+  })
+)
 
 function useFoo() {
   return {
@@ -45,3 +58,10 @@ expectType<Ref<string>>($raw(y))
 const c = $computed(() => 1)
 const cRef = $raw(c)
 expectType<ComputedRef<number>>(cRef)
+
+const c2 = $computed({
+  get: () => 1,
+  set: () => {}
+})
+const c2Ref = $raw(c2)
+expectType<WritableComputedRef<number>>(c2Ref)