When using shorthand function initializer on computed, this.foo shows error

[jtsom]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: MacOS
• Vetur version: 0.18.0
• VS Code version: Version 1.33.0-insider (1.33.0-insider)

Problem

In a Vue application that is using just plain Javascript (<script>), setting

  "compilerOptions": {
    "checkJs": true
  }

in jsconfig.json to enable the new features mentioned in 0.18.0 ( "compilerOptions": {
"checkJs": true
})
causes many things that were errors to show up as errors.

1. imports can't be found using the '@' shortcut:

Variables defined in a data() section are not recognized:

Reproducible Case

Create a new vue (cli) app, add some variables in a data statement, see the errors.
Try adding an import with a @.

[octref]

You need to setup path mapping: https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#vetur-cant-recognize-components-imported-using-webpacks-alias.

[jtsom]

That’s fine but I don’t think that will help the issue with not recognizing the variables defined in the data() section, nor the getters defined my the mapGetters/mapState

[octref]

Can you post a minimal reproducible example. Like the source of a full SFC.
data needs to return an object, so const foo = 5 aren't bound to this instance. return { foo: 5 } is.

[jtsom]

This is the complete data statement:

So yes, it returns an object.

[jtsom]

And the actions:

And the getters (computed):

[octref]

By "minimal reproducible example" I meant put your project generated with vue-cli in a public GH repo.
Minimal in that "make smallest edits from the generated code to show the problem".
I can't figure out how the rest of your file look like and how your whole project is setup.

[jtsom]

Here you go.

https://github.com/jtsom/VeturTest

See the lines marked // NOT RECOGNIZED

[octref]

I wouldn't expect cardData to work, but this is surprising:

Also once you change the way you write computed, it started to work:

I guess the issues are related to the typing upstream.

[jtsom]

I’m not seeing how you changed the way computed was written?

[jtsom]

And why wouldn’t “cardData” work? How would I make it work (not give an error)? Short of ignoring the error...

[octref]

Sorry that's overlapped behind the hover. Try thisIsSelected: function() {.

As for mapState. I didn't find your usage in the docs: https://vuex.vuejs.org/guide/state.html.

[jtsom]

Modules and namespaces: https://vuex.vuejs.org/guide/modules.html#binding-helpers-with-namespace

[p-kuen]

I can confirm that writing computed functions with explicit function() is the only way computed functions work well.
Writing them without them also removes type inference.

Working with TS.

[mrozekma]

Not sure if it helps, but the computed block parses correctly as long as any entry uses the name: function() {...} syntax; it only breaks if every entry uses the shorthand name() {...}

[octref]

Upstream issue:

microsoft/TypeScript#30854

See this comment. For now you can try to annotate the return type with JSDocs:

[fairking]

Found this open issue is similar to mine. Any idea how to fix all of this guys?

[p-kuen]

@denis-pujdak-adm-it
The problem you have is different.
If you are using <script lang="ts">, try using export default Vue.extend and `import Vue from 'vue' at the beginning. That should fix the errors.

[fairking]

Sorry mate but export default Vue.extend gives me even more errors:

But if I remove Vue.extend the situation looks much better:

[fairking]

Nope. The import Vue from "vue" is not working. It is working if I add the line then model errors dissapear, but after I close VS Code and open it again those errors come back.

[mrozekma]

@denis-pujdak-adm-it Patcher56 is correct, you need to use Vue.extend(...) or Typescript can't infer anything about the component options. You're missing the parentheses in your screenshot; it's a function call:

export default Vue.extend({
    data() {
        // etc.
    }
});

[octref]

Should be fixed as we upgraded to TS 3.6.3 in Vetur 0.22.3.