types: typing for ref macros

Author: yyx990803

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

@@ -0,0 +1,21 @@
+import { Ref, UnwrapRef, ShallowUnwrapRef, ComputedRef } from '@vue/reactivity'
+
+export function $ref<T>(arg: T | Ref<T>): UnwrapRef<T>
+export function $ref() {}
+
+declare const ComputedRefMarker: unique symbol
+type ComputedRefValue<T> = T & { [ComputedRefMarker]?: any }
+
+export function $computed<T>(getter: () => T): ComputedRefValue<T>
+export function $computed() {}
+
+export function $fromRefs<T>(source: T): ShallowUnwrapRef<T>
+export function $fromRefs() {
+  return null as any
+}
+
+export function $raw<T>(value: ComputedRefValue<T>): ComputedRef<T>
+export function $raw<T>(value: T): Ref<T>
+export function $raw() {
+  return null as any
+}

packages/runtime-core/src/index.ts

@@ -53,20 +53,19 @@ export { provide, inject } from './apiInject'
 export { nextTick } from './scheduler'
 export { defineComponent } from './apiDefineComponent'
 export { defineAsyncComponent } from './apiAsyncComponent'
+export { useAttrs, useSlots } from './apiSetupHelpers'
 
 // <script setup> API ----------------------------------------------------------
 
 export {
-  // macros runtime, for warnings only
+  // macros runtime, for typing and warnings only
   defineProps,
   defineEmits,
   defineExpose,
   withDefaults,
   // internal
   mergeDefaults,
-  withAsyncContext,
-  useAttrs,
-  useSlots
+  withAsyncContext
 } from './apiSetupHelpers'
 
 // Advanced API ----------------------------------------------------------------
@@ -345,3 +344,7 @@ const _compatUtils = {
 export const compatUtils = (__COMPAT__
   ? _compatUtils
   : null) as typeof _compatUtils
+
+// Ref macros ------------------------------------------------------------------
+// for dts generation only
+export { $ref, $computed, $raw, $fromRefs } from './helpers/refMacros'

packages/runtime-core/types/scriptSetupHelpers.d.ts

@@ -5,9 +5,19 @@ type _defineEmits = typeof defineEmits
 type _defineExpose = typeof defineExpose
 type _withDefaults = typeof withDefaults
 
+type _ref = typeof $ref
+type _computed = typeof $computed
+type _fromRefs = typeof $fromRefs
+type _raw = typeof $raw
+
 declare global {
   const defineProps: _defineProps
   const defineEmits: _defineEmits
   const defineExpose: _defineExpose
   const withDefaults: _withDefaults
+
+  const $ref: _ref
+  const $computed: _computed
+  const $fromRefs: _fromRefs
+  const $raw: _raw
 }

test-dts/refMacros.test-d.ts

@@ -0,0 +1,42 @@
+import {
+  expectType,
+  $ref,
+  $computed,
+  $fromRefs,
+  $raw,
+  ref,
+  Ref,
+  ComputedRef
+} from './index'
+
+// $ref
+expectType<number>($ref(1))
+expectType<number>($ref(ref(1)))
+expectType<{ foo: number }>($ref({ foo: ref(1) }))
+
+// $computed
+expectType<number>($computed(() => 1))
+let b = $ref(1)
+expectType<number>($computed(() => b))
+
+function useFoo() {
+  return {
+    x: ref(1),
+    y: ref('hi'),
+    z: 123
+  }
+}
+
+// $fromRefs
+const { x, y, z } = $fromRefs(useFoo())
+expectType<number>(x)
+expectType<string>(y)
+expectType<number>(z)
+
+// $raw
+expectType<Ref<number>>($raw(x))
+expectType<Ref<string>>($raw(y))
+
+const c = $computed(() => 1)
+const cRef = $raw(c)
+expectType<ComputedRef<number>>(cRef)