Property 'XXX' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'

Question

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.

Answer 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.

Answer 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

GitHub demo

Answer 3

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)
            }
        }

Answer 4

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

Answer 5

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.

Answer 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