'Property 'XXX' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'
I created a vue component with TypeScript, and I'm getting this error in data() and in methods():
Property 'xxx' does not exist on type 'CombinedVueInstance<Vue, {},
{}, {}, Readonly<Record<never, any>>>'.
For example:
33:18 Property 'open' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'.
31 | methods: {
32 | toggle: function () {
> 33 | this.open = !this.open
| ^
34 | if (this.open) {
35 | // Add click listener to whole page to close dropdown
36 | document.addEventListener('click', this.close)
This error also shows any time this.close() is used.
This is the component:
<script lang='ts'>
import Vue from 'vue';
import axios from 'axios'
export default Vue.extend({
data: function () {
return {
open: false
}
},
computed: {
profilePath: function () {
return "/user/" + this.$store.state.profile.profile.user.id
}
},
methods: {
toggle: function () {
this.open = !this.open
if (this.open) {
// Add click listener to whole page to close dropdown
document.addEventListener('click', this.close)
}
},
close: function () {
this.open = false;
document.removeEventListener('click', this.close)
}
}
})
</script>
What is causing this error? It seems to still build in development with the errors, but they are causing issues when I deploy to production.
Solution 1:[1]
As mentioned in the Typescript Support section of the Vue documentation:
Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of certain methods. For this reason, you may need to annotate the return type on methods like render and those in computed.
In your case, you should change profilePath: function () { to profilePath: function (): string {
You might come across the same error if you have a render() method that returns a value, without a : VNode annotation.
Solution 2:[2]
I get below error:
Property 'doThisInput' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.
And also doThisClickgave same error.
Solution:
i have added declaration to component.
<script lang="ts">
import Vue from 'vue';
// Add below code sample to your component
declare module 'vue/types/vue' {
interface Vue {
fields: Field[];
doThisClick: () => void;
doThisInput: () => void;
}
}
export default Vue.extend({
name: 'form-builder',
data() {
return {
fields: [
{
name: 'name',
events: { click: this.doThisClick, input: this.doThisInput },
},
],
};
},
methods: {
doThisClick(field: Field): void {
console.log('click', field, event);
},
doThisInput(field: Field): void {
console.log('Input', field, event);
},
},
});
</script>
Solution 3:[3]
For me, the solution was to explicitly define the return value for all computed properties, methods, etc.
So instead of:
myComputedProperty() {
return this.foo;
},
I had to do
myComputedProperty(): boolean {
return this.foo;
},
Even though I would expect, that by type inference this shouldn't be necessary
Solution 4:[4]
This seems to be inexplicably caused by using this.$store to compute the return value of profilePath, combined with the unspecified return type on its declaration.
One workaround is to specify the return type as string:
profilePath: function(): string {
verified with npm run serve and npm run build, using Vue CLI 3.7.0 on macOS Mojave
Solution 5:[5]
Jan, 2022 Update:
Change vetur.experimental.templateInterpolationService to false.
For VSCode, you can find it with the the search icon?:
Then, it's true by default:
Then, change it to false:
Finally, the error is solved.
Solution 6:[6]
Try this:
(this as any).open
This also works with injected properties:
(this as any).injectedProp
And $refs:
(this as any).$refs.myElement
The compiler can show warnings, but work
Important: this is a temporary solution, is more elegant to use class components
Solution 7:[7]
I faced this error when I'm using VS Code editor.
I've installed Vetur plugin on vs code, Vetur handles vue file as typescript file, so I've fixed it to edit settings.json file
Please find this file on your VS editor, then set change like the below
.vscode/settings.json
"vetur.experimental.templateInterpolationService": false
Solution 8:[8]
I have seen this issue creep up a few times when using typescript. I'm not sure if it's an issue with vue-tsc or something else, but this is the solution to get around the linter warnings/errors. (It could occur outside of Vue, but that is where I have seen it. I am sure the solution would be the same for any other lib/framework.)
Normally the issue would look something like this...
TS2339: Property 'title' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.
The solution is to define some types so that Vue is aware of what is trying to be defined in the component.
Example:
interface IData {
title: string;
}
interface IProps {
}
interface IComputed {
}
interface IMethods {
}
Define the component
export default Vue.extend<IData, IMethods, IComputed, IProps>({
data() {
title: "Some title"
}
});
Please also note that the order in which you pass your type parameters is important. The order follows DMCP (Data, Methods, Computed, Props).
Solution 9:[9]
Same issue is described here https://www.gitmemory.com/issue/vuejs/vue/9873/485481541
As its a problem with TS 3.4.x, 3.9.6 works very well for me now
Solution 10:[10]
The temporary solution is to downgrade to the previous version until this is fixed. Downgraded the vuter version to 0.26.0 and it works.
Solution 11:[11]
You need to use function in the correct way to preserve the reference of this.
methods: {
toggle() {
this.open = !this.open
if (this.open) {
// Add click listener to whole page to close dropdown
document.addEventListener('click', this.close)
}
},
close() {
this.open = false;
document.removeEventListener('click', this.close)
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow