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:
Info about my setup:
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:
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();
}
});
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.