Configuration: automatic type acquisition for vue.js

[francoisromain]

• VSCode Version: 1.20.1
• OS Version: 10.13.3

Hello,
I configured vs code for automatic type acquisition in a javascript / vue.js project (not typescript). This is handy most of the time, but this also shows errors on non-errors:

• on computed properties mapped from vuex. Example: Property 'isLoaded' does not exist on type '() => any'. any.
• on refs. Example: this.$refs.name.focus() makes the error: Property 'focus' does not exist on type 'Vue | Element | Vue[] | Element[]'.

jsconfig.json:

{
  "compilerOptions": {
    "checkJs": true,
    "target": "es2017"
  },
  "exclude": ["node_modules", "**/node_modules/*", "dist", "example/dist"]
}

Is there a way to avoid showing those non-errors as errors?

Thank you

[mjbvz]

@francoisromain Can you please share some example code where these errors are showing up

[francoisromain]

@mjbvz sure.

<template>
<div><input type="text" ref="name"></div>
</template>
<script>
  mounted () {
      this.$refs.name.focus()
  }
</script>

this makes an error on .focus(): Property 'focus' does not exist on type 'Vue | Element | Vue[] | Element[]'.

I am trying to reduce an example about the computed property error and come back quick.

[octref]

By ATA you mean you don't have Vue with typing installed in your project folder and want Vetur to work with it?

[francoisromain]

Sorry I am new to this. Am I suppose to install vue with typing? (I thought type declaration files were automatically downloaded).

I have Vetur installed and running, I am not sure to understand how Vetur and ATA split the type checking work. Do you mind explaining a bit please? Thank you

[octref]

When you install vue, you get the typing out of the box.

The problem is caused by having "checkJs": true in your jsconfig, and Vue's typing for $refs seems to be a bit off. I'll open an issue for Vue side soon.

[HerringtonDarkholme]

Hi, $refs indeed contain Element or Vue instances. So you don't have focus method on $refs' element. The problem is you have to cast it to the correct subtype.
microsoft/TypeScript#17453

You can also try turning checkJS off.

[vscodebot]

Please ask your question on StackOverflow. We have a great community over there. They have already answered thousands of questions and are happy to answer yours as well. See also our issue reporting guidelines.

Happy Coding!

[francoisromain]

@HerringtonDarkholme @octref
How do you "cast it to the correct subtype"?

[octref]

      /** @type {HTMLElement} */ (this.$refs.name).focus();

[francoisromain]

@HerringtonDarkholme @octref
thank you!

[francoisromain]

@octref do you have a hint on this one: https://stackoverflow.com/questions/49201440/vs-code-cannot-find-module-vue-and-package-json ?

[octref]

Not really. Those seem to be js/ts errors. You should open a new issue.