Types inferring works incorrectly in v-for with destruction

[avinean]

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[] }

2. 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

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

Use it in v-for without destruction
`

{{ value.value }}

` `v-if` works as expected and `value.value` has a coresponding type

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

The sane code with pure TS

[wusiquan]

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

[avinean]

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

while it infers incorrectly in template

[wusiquan]

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.

[edison1105]

The issue can no longer be reproduced using the latest version of Vue.
see Playground