vue: [Vue + Typescript] Property does not exist on type in computed function

Let me left a note for everyone who’re confused as i am: annotate ALL return types of computed properties.

Please read https://vuejs.org/v2/guide/typescript.html You should do the following things to make type inference works.

• set strict: true or noImplicitThis: true for compiler option.
• annotate return type of computed properties.

Pretty sure he meant that one of its computed properties was not explicitly typed.

get(): string {

Sorry for the necro, but I am still getting this error when the computed property is not a function, but rather a get+set construct like this:

interface Props {
  label: string,
}

export default Vue.extend({
  props: {
    value: {
      type: Object,
      required: true,
    } as Props,
  },

  computed: {
    label: {
      get() {
        // Property 'value' does not exist on type '{ get(): string; set(val: string): void; }'.
        return this.value.label;
      },
      set(val: string) {
        this.$emit('update:label', val);
      },
    },
  },
};

I am using the latest vue-cli typescript setup (just set it up this week), strict mode is enabled and I think I got the return types covered. Is there anything I’m missing? Thanks!

Edit: It looks like I had a single computed property that was not documented, which caused this error. Seems to work now.

I had the same issue Property 'sender' does not exist on type '(() => any) | ComputedOptions<any>'. Property 'sender' does not exist on type '() => any'.Vetur(2339)

My code was like:

props: {
    message: {
      type: Object as PropType<Message>,
      required: true,
    },
  },

computed: {
  isPostedByUser() {
    return this.message.sender.type === 'user'
  },
  isPostedByRobot() {
    return this.message.sender.type === 'robot'
  },  
etc...

✅ In order to solve this issue, I just added a return type on each computed variable.

computed: {
  isPostedByUser(): boolean {
    return this.message.sender.type === 'user'
  },
  isPostedByRobot(): boolean {
    return this.message.sender.type === 'robot'
  },  
etc...

This also happens on methods, vscode can find those at runtime, but at compile time it gives error in every ‘this’ used inside a method.

Sorry for the necro, but I am still getting this error when the computed property is not a function, but rather a get+set construct like this:

interface Props {
  label: string,
}

export default Vue.extend({
  props: {
    value: {
      type: Object,
      required: true,
    } as Props,
  },

  computed: {
    label: {
      get() {
        // Property 'value' does not exist on type '{ get(): string; set(val: string): void; }'.
        return this.value.label;
      },
      set(val: string) {
        this.$emit('update:label', val);
      },
    },
  },
};

I am using the latest vue-cli typescript setup (just set it up this week), strict mode is enabled and I think I got the return types covered. Is there anything I’m missing? Thanks!

Edit: It looks like I had a single computed property that was not documented, which caused this error. Seems to work now.

What does “having a single computed property that was not documented” means ?

I had the same issue, and I know this issue has been closed for some time now but it could maybe help people who are also just starting with TypeScript and Vue 😃

My issue was that I got the error “Property ‘value’ does not exist on type ‘(() => any) | ComputedOptions<any>’. Property ‘value’ does not exist on type ‘() => any’.ts(2339)” for return this.value in the computed get of computedValue:

export default Vue.extend({

    props: {
        value: { type: Number, default: 0 }
    },

    computed: {
        computedValue: {
            get(): number {
                return this.value;
            },
            set(newValue) {
                this.$emit("input", newValue);
            }
        }
    },

    methods: {
        decreaseCounterValue() {
            this.computedValue -= 1;
        },
        increaseCounterValue() {
            this.computedValue += 1;
        }
    }
})

In order to resolve my issue, I added a type to the parameter of the computed set function:

export default Vue.extend({
    name: 'AbbeyCounter',

    props: {
        value: { type: Number, default: 0 }
    },

    computed: {
        computedValue: {
            get(): number {
                return this.value;
            },
            set(newValue: number) {
                this.$emit("input", newValue);
            }
        }
    },

    methods: {
        decreaseCounterValue() {
            this.computedValue -= 1;
        },
        increaseCounterValue() {
            this.computedValue += 1;
        }
    }
})

Hope this helps for other people 😃 Have a great day!

@GustavoFenilli how did you fix that? right now vue on typescript is giving me more pain than it’s worth

Edit: I already checked the forum and found this question asked in 2018 with 0 answers. The poster just worked around it by casting (this as any).

Don’t really remember what I did, we changed the project to not use typescript and class type components, we are using now vue 2.6 with vue composition and javascript.

@GustavoFenilli how did you fix that? right now vue on typescript is giving me more pain than it’s worth. All my return types are already annotated.

Edit: I already checked the forum and found this question asked in 2018 with 0 answers. The poster just worked around it by casting (this as any).