Skip to content

Commit

Permalink
fix(types): fix ref macro types
Browse files Browse the repository at this point in the history
fix #4499
  • Loading branch information
yyx990803 committed Sep 4, 2021
1 parent 5852cc8 commit 815bfcf
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 28 deletions.
3 changes: 3 additions & 0 deletions packages/reactivity/src/computed.ts
Expand Up @@ -4,8 +4,11 @@ import { isFunction, NOOP } from '@vue/shared'
import { ReactiveFlags, toRaw } from './reactive'
import { Dep } from './dep'

declare const ComoutedRefSymbol: unique symbol

This comment has been minimized.

Copy link
@aphex

aphex Sep 5, 2021

I think ya meant ComputedRefSymbol :)


export interface ComputedRef<T = any> extends WritableComputedRef<T> {
readonly value: T
[ComoutedRefSymbol]: true
}

export interface WritableComputedRef<T> extends Ref<T> {
Expand Down
3 changes: 2 additions & 1 deletion packages/reactivity/src/ref.ts
Expand Up @@ -251,7 +251,8 @@ export interface RefUnwrapBailTypes {}
export type ShallowUnwrapRef<T> = {
[K in keyof T]: T[K] extends Ref<infer V>
? V
: T[K] extends Ref<infer V> | undefined // if `V` is `unknown` that means it does not extend `Ref` and is undefined
: // if `V` is `unknown` that means it does not extend `Ref` and is undefined
T[K] extends Ref<infer V> | undefined
? unknown extends V
? undefined
: V | undefined
Expand Down
52 changes: 37 additions & 15 deletions packages/vue/ref-macros.d.ts
Expand Up @@ -4,44 +4,66 @@ import {
ComputedRef,
WritableComputedOptions,
DebuggerOptions,
WritableComputedRef,
ShallowUnwrapRef
WritableComputedRef
} from '@vue/runtime-dom'

declare const RefMarker: unique symbol
type RefValue<T> = T & { [RefMarker]?: any }
declare const RefType: unique symbol

declare const ComputedRefMarker: unique symbol
type ComputedRefValue<T> = T & { [ComputedRefMarker]?: any }
declare const enum RefTypes {
Ref = 1,
ComputedRef = 2,
WritableComputedRef = 3
}

type RefValue<T> = T extends null | undefined
? T
: T & { [RefType]?: RefTypes.Ref }

type ComputedRefValue<T> = T extends null | undefined
? T
: T & { [RefType]?: RefTypes.ComputedRef }

type WritableComputedRefValue<T> = T extends null | undefined
? T
: T & { [RefType]?: RefTypes.WritableComputedRef }

declare const WritableComputedRefMarker: unique symbol
type WritableComputedRefValue<T> = T & { [WritableComputedRefMarker]?: any }
type NormalObject<T extends object> = T & { [RefType]?: never }

/**
* Vue ref transform macro for binding refs as reactive variables.
*/
declare function _$<T>(arg: ComputedRef<T>): ComputedRefValue<T>
declare function _$<T>(arg: WritableComputedRef<T>): WritableComputedRefValue<T>
declare function _$<T>(arg: Ref<T>): RefValue<T>
declare function _$<T extends object>(arg?: T): ShallowUnwrapRef<T>
declare function _$<T extends object>(arg?: T): DestructureRefs<T>

type DestructureRefs<T extends object> = {
[K in keyof T]: T[K] extends ComputedRef<infer V>
? ComputedRefValue<V>
: T[K] extends WritableComputedRef<infer V>
? WritableComputedRefValue<V>
: T[K] extends Ref<infer V>
? RefValue<V>
: T[K]
}

/**
* Vue ref transform macro for accessing underlying refs of reactive varaibles.
*/
declare function _$$<T extends object>(arg: NormalObject<T>): ToRawRefs<T>
declare function _$$<T>(value: RefValue<T>): Ref<T>
declare function _$$<T>(value: ComputedRefValue<T>): ComputedRef<T>
declare function _$$<T>(
value: WritableComputedRefValue<T>
): WritableComputedRef<T>
declare function _$$<T>(value: RefValue<T>): Ref<T>
declare function _$$<T extends object>(arg: T): ToRawRefs<T>

type ToRawRefs<T extends object> = {
[K in keyof T]: T[K] extends ComputedRefValue<infer V>
? ComputedRefValue<V>
[K in keyof T]: T[K] extends RefValue<infer V>
? Ref<V>
: T[K] extends ComputedRefValue<infer V>
? ComputedRef<V>
: T[K] extends WritableComputedRefValue<infer V>
? WritableComputedRef<V>
: T[K] extends RefValue<infer V>
? Ref<V>
: T[K] extends object
? T[K] extends
| Function
Expand Down
69 changes: 57 additions & 12 deletions test-dts/refTransformMacros.test-d.ts
@@ -1,14 +1,55 @@
import { WritableComputedRef } from '@vue/reactivity'
import { expectType, ref, Ref, ComputedRef } from './index'
import { expectType, ref, computed, Ref, ComputedRef } from './index'
import 'vue/ref-macros'
import { RefType, RefTypes } from 'vue/ref-macros'

// wrapping refs

// normal
let n = $(ref(1))
n = 2
// @ts-expect-error
n = 'foo'

// #4499 nullable
let msg = $(ref<string | null>(null))
msg = 'hello world'
msg = null
expectType<RefTypes.Ref | undefined>(msg![RefType])

// computed
let m = $(computed(() => n + 1))
m * 1
// @ts-expect-error
m.slice()
expectType<RefTypes.ComputedRef | undefined>(m[RefType])

// writable computed
let wc = $(
computed({
get: () => n + 1,
set: v => (n = v - 1)
})
)
wc = 2
// @ts-expect-error
wc = 'foo'
expectType<RefTypes.WritableComputedRef | undefined>(wc[RefType])

// destructure
const { x, y, z } = $(useFoo())
function useFoo() {
let x = $ref(1)
let y = $computed(() => 'hi')

return $$({
x,
y,
z: 123
})
}

const fooRes = useFoo()
const { x, y, z } = $(fooRes)
expectType<number>(x)
expectType<string>(y)
expectType<number>(z)
Expand Down Expand Up @@ -39,17 +80,12 @@ expectType<number>(
})
)

function useFoo() {
return {
x: ref(1),
y: ref('hi'),
z: 123
}
}

// $$
expectType<Ref<number>>($$(x))
expectType<Ref<string>>($$(y))
const xRef = $$(x)
expectType<Ref<number>>(xRef)

const yRef = $$(y)
expectType<ComputedRef<string>>(yRef)

const c = $computed(() => 1)
const cRef = $$(c)
Expand All @@ -63,3 +99,12 @@ const c2Ref = $$(c2)
expectType<WritableComputedRef<number>>(c2Ref)

// $$ on object
const obj = $$({
n,
m,
wc
})

expectType<Ref<number>>(obj.n)
expectType<ComputedRef<number>>(obj.m)
expectType<WritableComputedRef<number>>(obj.wc)

0 comments on commit 815bfcf

Please sign in to comment.