CODEWITHSUNDEEP
typescriptvue.jsvuejs3vscode-extensionsvite
Eduardo
Eduardo

Reputation: 1321

Volar and vue-tsc are showing different TS errors

In my Vite + Vue 3 + TypeScript project I have configured vue-tsc to run in watch mode while I am developing. I use VS Code with Volar. Now on one hand I have all my TS errors printed in the console which is what I was looking for. On the other hand I have extra errors from vue-tsc, but I don't have them from Volar.

For example, I have one error saying that state.month is not assignable to type Date, but it is Date.

vue-tsc vue-tsc

component, volar does not showing that error component, volar does not showing that error

state in the component. As you see, state.month is Date state in the component

Could someone help me, please? Did I missed something?

Upvotes: 8

Views: 9333

Answers (2)

Grey Vugrin
Grey Vugrin

Reputation: 658

Another thing to check is that your vue-tsc package is up to date. Volar is a VS Code extension and gets auto-updated over time, while vue-tsc is an npm package, so npm will lock it to a version and it could get outdated.

That was the solution for me. To get the latest & save for dev, run npm i -D vue-tsc@latest.

Reference in the Volar repo: https://github.com/johnsoncodehk/volar/issues/1205

Upvotes: 6

Eduardo
Eduardo

Reputation: 1321

The version of TypeScript in project's package.json and the version of TypeScript in VSCode were different. That was causing these weird errors. When I had updated the version in package.json to the same version VSCode has all errors were gone.

enter image description here

Upvotes: 8

Related Questions