Subscribe on changes!

Using $$() on destructured props, the return type is error when the prop is an array

avatar
May 21st 2022

Vue version

3.2.35

Link to minimal reproduction

https://github.com/xiafrog/unft/blob/master/src/components/Scan/Tx/Table.vue

Steps to reproduce

In line 25, use the original ref of data as the parameter of useTxTable. The type of $$(data) is error.

What is expected?

The type of $$(data) should be Ref<Tx[]>.

What is actually happening?

The type of $$(data) actually be Ref<Tx>[].

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 AMD Ryzen 7 4800U with Radeon Graphics
    Memory: 3.72 GB / 15.37 GB
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.5.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (99.0.1150.52)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    vue: ^3.2.35 => 3.2.35

Any additional comments?

I think the reason for this bug is that defineProps has the wrong type when destructuring. When using reactivity transform, the variable deconstructed by defineProps should be of type ReactiveVariable<T> rather than T. Because of this reason, the type of $$() is wrong.

avatar
May 21st 2022

image

avatar
May 22nd 2022

This is not a bug, try the following code:

const txArr = $ref(data)
$$(txArr)

Further explanation

Since the value you pass in is not a "reactive variable", "$$" function will think that you are trying to deconstruct array. e.g. const [fooRef, barRef] = $$([reactiveFoo, reactiveBar])

avatar
May 22nd 2022

Thank you! It's useful!