vuejs / language-tools

⚡ High-performance Vue language tooling based-on Volar.js
https://marketplace.visualstudio.com/items?itemName=Vue.volar
MIT License
5.87k stars 400 forks source link

在模板(<template>)内使用函数型的属性(attribute)中, ref的value 无法被TypeScript正确的检查 #4604

Closed amulet-faith closed 3 months ago

amulet-faith commented 3 months ago

Vue - Official extension or vue-tsc version

v2.0.26

VSCode version

1.91.1 (Universal)

Vue version

3.4.33

TypeScript version

5.4.0

System Info

Browser: Chrome Version 126.0.6478.183 (Official Build) (arm64)
System: MacOS Sonoma 14.5

Steps to reproduce

创建允许传入回调函数作为Prop的子组件 创建调用它的父组件, 并直接在模板内传入函数实现, 在函数实现内使用Ref定义的变量

What is expected?

运行和TypeScript检查保持一致

What is actually happening?

如图, 如果没有.value 则可以正确运行, 但是TS检查报错: Property 'choosedFormIdList' does not exist on type 'Ref<{ curTaskId?: number; choosedFormIdList?: (string | number)[]; }>'.ts(2339)

image

浏览器的 console 可以得到预期结果:

no_value_runtime_no_error



然而 如果加入 .value 则TS可以正确检查代码, 但是运行时报错:

code_no_error

浏览器的 console 报错如下: TypeError: Cannot set properties of undefined (setting 'choosedFormIdList')

runtime_error

Link to minimal reproduction

No response

Any additional comments?

No response