Type checking on data() properties doesn't work in Vue SFC's

[qgates]

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

Info

• Platform: Win10
• Vetur version: 0.23.0
• VS Code version: 1.42.1

Problem

Given the below code snippet, TSC correctly reports a TS2322 type mismatch on this.foo but vscode/vetur ignores this error. Furthermore, hovering over foo in mounted(), vscode reports the type as any whereas if I hover over foo() in data, it correctly reports boolean. What's going on here? Vetur is reporting most errors correctly, but type checking seems not to be working in parts of Vue SFC's.

<template>
   <div>
      <p>{{ hello }}</p>
   </div>
</template>

<script lang="ts">
   import Vue, { VueConstructor } from 'vue'

   export default Vue.extend({
      data() { return {
         foo: false,
      }},

      mounted() {
         this.foo = 5;
      },

      computed: {
         hello() : string {
            return "hello world";
         }
      }
   });
</script>

<style>
</style>

Reproducible Case

Paste in the above code into a '.vue' file in a Vue-CLI project. Load the project in vscode and notice lack of type checking with foo.

[octref]

I cannot reproduce this in https://github.com/octref/veturpack:

[qgates]

Oh, so now I'm confused. Perhaps my slightly unorthodox project structure is throwing Vetur, but works without problems with TSC and webpack. My structure is something like this:

project_root
 |
 +-- resources
 |    |
 |    +-- app
 |         |
 |         | tsconfig.json
 |         | app.ts
 |         | vue-shim.d.ts
 |         | (other .ts & .json)
 |         |
 |         +-- components
 |               |
 |               | App.vue
 |               | Component1.vue
 |               | (more .vue components)
 |               |
 |
 +-- (other dir)
 |
 +-- (other dir)

Webpack npm run watch etc commands run from project_root, and everything works perfectly when files in /resources/app are modified. Project_root is the folder loaded into vscode. My tsconfig file (in /resources/app) looks like this:

{
    "compilerOptions": {
	    "target": "es6",
	    "strict": true,
	    "module": "es2015",
	    "moduleResolution": "node",
	    "experimentalDecorators": true,
	    "sourceMap": true,
	    "skipLibCheck": true
    },
    "include": [
        "./**/*"
    ],
    "exclude": [
        "node_modules",
        "vendor"
    ]
}

TSC via webpack picks up errors liked the one indicated in my original post, because it correctly detects the type of foo and can determine the type of this.foo. But vscode/vetur sees any this.* variables as any. Weirdly many of the Language server Vetur features are working, eg. type mismatch within a function will show errors.

[qgates]

Ok, I found the problem. It seems that tsconfig.json must be in the project root directory loaded by vscode for tsserver to be started.

Perhaps this is a bug or perhaps room for improvement; in our use case, we have a laravel project with a served Vue/TS app whose source resides in /resources/app. So tsconfig is (justifiably) localised to this folder, since other apps that may be served may utilise other tsconfig. TSC itself seems to have no problem with this,

I see this problem with Vetur but perhaps the issue is with tsserver?

[qgates]

Since TSC allows tsconfig to be at any level higher in the source tree than files it's compiling, vscode's typescript/vue intel features should follow suit. Something similar seems to have been requested at issue #815.

The workaround is that tsconfig.js must be located at vscode's project root (open folder) for vetur/typescript checking and intellisense to work correctly. It appears that improved functionality along these lines has been requested at issue.

If current behaviour is satisfactory go ahead and close this issue. Thanks for help.

[octref]

I'll track it in #815 then. Glad you figured it out.