Types inferring works incorrectly in v-for with destruction
Vue version
3.3.4
Link to minimal reproduction
Steps to reproduce
- 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[] }
- 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
`
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
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
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.
@wusiquan but in your example type infers correctly even with destructuring
while it infers incorrectly in template
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.