Subscribe on changes!

Types inferring works incorrectly in v-for with destruction

avatar
Aug 28th 2023

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqNU8FymzAQ/RUNl7QzNhzSEwOZtJ10Jj20nSa3kAOGta0UJI20Iu5Q/r0rCRPsOJ7ABe3b3ff2reijz0rFnYUojTJTaa6QGUCrWFOKTV5EaIroqhDuxb8K2DfNDd4itCxnfSEYPS6esos11wYvQqgrG0sxYdsV6IfHQgxsrL+DSor6ZAPjocMOBjUXm4MO91uuTzdAhxzWr6RsoBT7BoUgCoMBNek0zMMj+zeT5o8TD51y5jpkSXDI+5ERopoSgU6MZTXvWLdcS02efeidoEVgGT4yLkZCb6VTN6bztXPYDZXn+eRgdMX6PlSwYWBZQsmB5OVrThcyz5N4KD5HFZ8hzJJp2GgR8VZJjcu2VPGTkYJujl9DMQIkIN0vhogtuHMRbRGVSZOkqgWV1dDwTscCMBGqTa4pLdFWIG9hWcv2+jK+jD8Ru8F5OAbTLldaPhvQ1KSIFjOahIId6KUGUYMG/V7ao7I59RH0it6xD3SzyBQ0dHnWfHNkSSVbxRvQPxVyunkH1pRNI5+/+xhqC9Ms1RaqPyfiT2YXZvqlwSubzY+l3gAG+ObuB+zoewJbWdtmXMMb4G8wsrFOY0j7YkVNsmd5Xu2t3zD9kffmZocgzH4oJ9S74fP9Pr6eGf1FLrk9uTj8B3F7hx4=

Steps to reproduce

  1. There are 3 types. All of them have equal set of fields. Fields have different types

type FristItem = { type: 'first' value: number[] } type SecondItem = { type: 'second' value: string[] } type ThirdItem = { type: 'third' value: boolean[] }

  1. Create a variable of union type of types described above const values:FristItem[] | SecondItem[] | ThirdItem[] = []

What is expected?

It is expected v-for to work the same way as destructing in loops in TS image

What is actually happening?

Use it in v-for with destruction `

{{ value }}
` There is a `v-if` which should filter items but value has type equal to union types of all fields with such name image

Use it in v-for without destruction <div v-for="value in values"> <div v-if="value.type === 'first'"> {{ value.value }} </div> </div> v-if works as expected and value.value has a coresponding type image

System Info

System:
    OS: macOS 13.4.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 1.14 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.6.0 - ~/.volta/tools/image/node/18.6.0/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 8.13.2 - ~/.volta/tools/image/node/18.6.0/bin/npm
    pnpm: 8.2.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 116.0.5845.110
    Safari: 16.5.2
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

How it works in vue image

The sane code with pure TS image

avatar
Sep 7th 2023

I opened a typescript issue https://github.com/microsoft/TypeScript/issues/55664, expecting resolved. Temporarily your could use value.type and value.value, the method you wrote.

avatar
Sep 19th 2023

@wusiquan but in your example type infers correctly even with destructuring image

while it infers incorrectly in template image

avatar
Sep 20th 2023

The upper one, the test 1 code, was used to show that an array is not nested, its type is inferred right by typescript, but when it came to the test code 4 or code 5, its type is not expected. In fact, the lower one, the template code, is compiled to some codes like the form of test code 5 in volar.