Error when using ref from Vue 3 composition API

I'm using Webstorm to build a Vue 3 app.  The ref function creates a Ref object which the value attribute is then used and updated as needed to update reactive content.  However, Webstorm complains on assignment to the value attribute that “Assigned expression type {some type} is not assignable to type T”.

Here is an example:

I figured I would try typescript instead of JSDoc.  However, using TS doesn't seem to be checking types at all:

I'm confused and would love if someone knows what's going on here.

Also as far as my code and Webstorm goes, JSDoc is working great for everything except ref objects.

0
3 comments

Can you please share a bit more context around the problem? Which version of the IDE are you using? What do your settings in Settings | Languages & Frameworks | TypeScript | Vue look like?

In 2024.1.* type checking works out of the box for me when using lang="ts":

To make it work with JavaScript, I need a tsconfig.json like the following:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "allowJs": true,
    "checkJs": true
  }
}

 

 

0

I'm running Webstorm 2024.1.3.

Here are the settings:

Updating my tsconfig.json didn't have any effect.

Also, this project was created as a JS Vue 2 project, later updated to Vue 3 and components are being migrated to the composition API.

0

It works for me in the same version using similar setup.

Could you please attach the logs from the language service? 

To collect service logs please go to Help | Diagnostic Tools | Debug Log Settings… and add #com.intellij.platform.lsp to the Custom Debug Configuration window.

Then restart the IDE, reproduce the issue, and send us all the IDE logs collected via Help | Collect Logs and Diagnostic Data….

0

Please sign in to leave a comment.