如何修复 VSCode 中的“Property XX does not exist on type 'CombinedVueInstance”错误？ （Vue 与打字稿）

Question

VS Code is reporting a lot of problems/red lines when editing my Vue Typescript files:

Example error:

[ts] Property 'isLoading' does not exist on type 'CombinedVueInstance<Vue, 
object, > object, object, Readonly<Record<never, any>>>'. [2339]

The problem seems to come when I reference a property on "this", and all such references have a red line in the editor stating a variant of the error above. The problem is the same for both properties defined in Vue's data object and functions defined in methods.

Now, there are two interesting aspects:

1. I had no issue with these files until today. Yesterday, before shutting down, everything was working as intended. Restarting today I got this issue.
2. The code compiles and runs. If I build the files using tsc, they compile nicely - and the application deploys and works as intended.

Info about my setup:

• npm view typescript version gives me version 3.2.4
• Vue is at 2.5.22
• VS Code is at 1.30.2.

tsconfig.js:

{
    "compilerOptions": {
        "lib": [
            "es6",
            "dom"
        ],
        "noImplicitAny": true,
        "allowJs": true,
        "target": "es5",
        "strict": true,
        "module": "es6",
        "moduleResolution": "node",
        "outDir": "../../../dist/public/js",
        "sourceMap": true
    }
}

I have tried the following:

• Reinstalling Typescript and Vue
• Restarting VS Code numerous times
• Restarting TSServer manually
• Restarting the computer

I am now completely stumped - and hope someone can help me...

Code example below (all this. references have a red line in my VS Code):

import axios from "axios";
import Vue from "vue";

// tslint:disable-next-line no-unused-expression
new Vue({
    computed: {
        hasProvider(): boolean {
            // this line throw two errors
            return this.isLoading === false && this.providerList.length > 0;
        },
    },
    data() {
        return {
            description: "",
            id: "",
            isLoading: true,
            name: "",
            providerList: [],
        };
    },
    el: "#app",
    methods: {
        loadProviderList() {
            axios
                .get("/api/provider/all")
                .then((res: any) => {
                    // these lines throw an error
                    this.providerList = res.data.items;
                    this.isLoading = false;
                })
                .catch((err: any) => {
                    // tslint:disable-next-line:no-console
                    console.log(err);
                });
        }
    },
    mounted() {
        // this line throw an error
        return this.loadProviderList();
    }
});

Answer 1

Came across this error at work today (Vue without TypeScript in VSCode).

It also came out of nowhere for us, and in the end the culprit was just that the Vetur extension in VSCode needed to be reloaded.

Answer 2

在 settings.json 中，设置：

"vetur.experimental.templateInterpolationService": false

Answer 3

Seems the issue was with the return statement in my mounted() stage. Removing that return (probably something leftover from an example I was using) solved the problem.

mounted() {
        // this works
        this.loadProviderList();
}

Still, strange that the environment changed behaviour from one day to the next, and that it compiled - might never get an answer to that :)

Answer 4

I solved this issue with:

tsconfig.json

{
    "compilerOptions": {
        "noImplicitThis": false
    }
}