search

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.61k stars 8.32k forks source link

v-for does not infer actual key/value types of generic prop #11076

Closed pimlie closed 6 days ago

pimlie commented 5 months ago

Vue version

3.5.0-alpha.2

Link to minimal reproduction

https://play.vuejs.org/#eNp9U11v2jAU/St3eQlIEKp1e2EUba06aXtYq5W3ppoC3FCXxI5sh9Gy/Pcd24Gmny+JfT/PPT53F32rqmRTczSOJmahRWWpyOTqJI2sSSMybOtqmkoiUVZKW9qR5pwayrUqKUZi3HGeqbIaIMTeV4xLUZfyTMlcrPYJaZSMXJDrmEZfUumSiRZKGotvJ+GEdsGXKzVGySKbczGm+LtSMTWD4Jtnuus7zXTX9/DU97D3NWQyK0wu2DwBGdB0sAPEmu9V7m34dQG60C5sxIKYSUic9vqpnIwCn2APF8tlVWSWPZeTaopAwNvts5tmMgo8o0RZuVp4ggWOeIQxGqGlN3QQRPQVd1h7+PXpZEruELA4CwJGKDkZdXpHA7xrKJfcGSXx7J7n0EsUrC8qKzBXGgFeYDKNsqJQf396m9U1twwj55YX61fsd2brbGl0qdmw3uCtDz6b6RXb4D6/+sVbnA/OUi3rAtHvOH+zwZAOYwg7reUSsDtxHu0Pr0ghVzNzvrUszX4oB9SrwMenEZToGH9r9Ee4x8knn5fKBizuVfz63oBp3vqVeLkKUDZdr0lIMlYD4E1HpsEChaLLU/28tZu0YslaLGCcEfhiuXymageGaMm5kHypVWUm7XBBBmOa+bGg2XYfg6y5FBZYQ945Loe8HmOfILB44GQ2bndk1h/TRonlvphH/c4KfBgOaXZFrLXSpKQr5ThxbQHJsRa3bPwjWZdz1jiY+3KOxiQMSWUpM0asZDYvmKwKVMctmjih4TB0mtfWosFmmCsdtkXmHnrfNQws+GUqxGKNAAeh9zgg9mjqyfDbKvPEv5Xf2FC57aLdsrWDSfU42zMYr7a5mN/xwibAbjw8sepfH90cOudCG9tp93yl/2xYO4FDjMfJ5+RomBXVbZZ8jJr/rDbySw==

Steps to reproduce

See the html comments in the template of the Comp.vue component

What is expected?

That v-for="(value, key) in obj" infers the actual type of key and value

What is actually happening?

It infers the generic key type string | number | symbol for objects. Also note that when calling Object.keys(config)[0] the correct type is inferred

image

System Info

No response

Any additional comments?

This issue doesn't seem to be related to https://github.com/vuejs/core/issues/9059

Workaround is to assert the type of the object in the v-for explicitly (this messes up syntax highlighting though): image

Hiws commented 5 months ago

Probably related to https://github.com/vuejs/core/issues/8144

Workaround can be to use const props = defineProps({ ... }) and then use props.config in the template to get the correct type.

There's also https://github.com/vuejs/language-tools/issues/3820 and https://github.com/vuejs/core/pull/10801 but based on that it should've been fixed in 3.5.0-alpha.1

davidmatter commented 5 months ago

Might be related to

edison1105 commented 1 week ago

The issue can no longer be reproduced locally with "vue": "^3.5.12" and "vue-tsc": "^2.1.6". image