Subscribe on changes!

'toRef' function return type gets a union of 'Ref<*>'.

avatar
Dec 7th 2020

Version

3.0.4

Reproduction link

about:blank

Steps to reproduce

interface State {
  someValue: string | number | (string | number)[]
}

const state = reactive<State>({someValue: 0});

const someValueRef = toRef(state, 'someValue');

What is expected?

typeof someValueRef should be Ref<string | number | (string| number)[]>

What is actually happening?

typeof someValueRef is Ref<string> | Ref<number> | Ref<(number | string)[]>


Maybe add api named toShallowRef

avatar
Dec 7th 2020

Should have been fixed by https://github.com/vuejs/vue-next/commit/e315d84936c82bee8f2cf2369c61b5aaec38f328 but confirmed locally that the error still exists

avatar
Dec 7th 2020

The error should be ToRef type.

avatar
Dec 7th 2020
class ObjectRefImpl<T extends object, K extends keyof T> {
  public readonly __v_isRef = true

  constructor(private readonly _object: T, private readonly _key: K) {}

  get value() {
    return this._object[this._key]
  }

  set value(newVal) {
    this._object[this._key] = newVal
  }
}

The ObjectRefImpl show that the toRef result is a shallow-like ref. So the toRef return type should be a Ref<T>.