WebStorm Vue TypeScript variables in handlebars are always typed as any
Hello,
When using Vue with TypeScript in WebStorm I seem to run into a situation where variables don't have proper types when used in handlebars. When using them as attribute values, it recognizes everything just fine. However when used in handlebars all variables automatically receive type any.
Is there any way in which this could be fixed?
Please sign in to leave a comment.
Unfortunately I failed to reproduce the issue. Do you have a sample project you can share that reproduces it?
Yes, included is a small sample project that demonstrates the problem. A type is set up and an instance of that type is stored in App.vue. When using that instance within the handlebars in the vue template it loses its typing information.
https://github.com/treskilion/handle-bars-type-sample
Thank you!
Unfortunately, the problem can not be reproduced on our side in the project you’ve shared:
What IDE version do you use?
Hm interesting. I use WebStorm 2023.2.5 build #WS-232.10227.9
Do you have Vue language service (Volar) up and running? Please could you share a screenshot of the Typescript widget in the lower right corner?
This one? Or something other one?
Yes.
Please try choosing Vue language server (Volar) in Settings | Languages & Frameworks | TypeScript | Vue and re-open the project - does it help?
Yes this worked, thank you!