Shallow variables are being unwrapped in template #4948
Description
Vue - Official extension or vue-tsc version
2.1.8
VSCode version
1.94.2
Vue version
3.5.12
TypeScript version
5.6.3 and 5.7.0-dev.20241026
System Info
System:
OS: Windows 11 10.0.22631
CPU: (32) x64 AMD Ryzen 9 7950X3D 16-Core Processor
Memory: 13.51 GB / 31.14 GB
Binaries:
Node: 22.7.0 - C:\Program Files\nodejs\node.EXE
npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
pnpm: 9.12.1 - C:\Program Files\nodejs\pnpm.CMD
Browsers:
Edge: Chromium (127.0.2651.105)
Internet Explorer: 11.0.22621.3527package.json dependencies
{
"dependencies": {
"vue": "^3.5.12"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.1.4",
"typescript": "~5.6.2",
"vite": "^5.4.9",
"vue-tsc": "^2.1.6"
}
}Steps to reproduce
- Install version
2.1.8of theVue - OfficialVSCode extension - Create an SFC file.
- Paste in the following code:
<template>
<div>
<template v-for="item in items">
{{ item.name.value }}
{{ item.id }}
</template>
</div>
</template>
<script setup lang="ts">
import { shallowReactive, type Ref } from 'vue';
interface MyItem {
name: Ref<string>;
id: string;
}
const items = shallowReactive<MyItem[]>([]);
</script>- See how the
item.name.valueis marked as incorrect
What is expected?
The template for {{ item.name.value }} should be correct, since the array is shallow, which means the name property needs to be accessed using name.value.
What is actually happening?
vue-tsc unwraps the refs inside items, meaning that it marks item.name.value as incorrect, and only accepts item.name.
Link to minimal reproduction
https://github.com/Joery-M/vue-sfc-issue
Any additional comments?
This becomes an issue during assignment, like with v-model or inside a callback function, since the value will be replacing the ref, instead of the value inside the ref. This can lead to breaking the application.