Property 'XXX' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'
Solution 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
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 3
I get below error:
Property 'doThisInput' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.
And also doThisClick
gave 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 4
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 5
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
Comments
-
Qwertie over 2 years
I created a vue component with TypeScript, and I'm getting this error in
data()
and inmethods()
: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.