VueJS 2 + TypeScript: computed value does not detect property defined by data

Question

The following component:

<template lang="html">
  <div>
    <p>{{ bar }}</p>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export const FooBar = Vue.extend({
  computed: {
    bar: function() {
      return this.foo;
    }
  },
  data: function() {
    return {
      foo: 'bar',
    };
  },
});

export default FooBar;
</script>

Results in a type error:

13:19 Property 'foo' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.
    11 |   computed: {
    12 |     bar: function() {
  > 13 |       return this.foo;
       |                   ^
    14 |     }
    15 |   },
    16 |   data: function() {
Version: typescript 4.1.6

These kinds of errors do not occur when using class-style component syntax, but I would prefer not to use such syntax. Is there a recommended approach for defining types on VueJS components?

Complete/minimal repository reproduction here: https://github.com/davidRoussov/vue-typescript-error

Answer 1

As mentioned in the Typescript Support section of the Vue documentation:

In your case, you should change bar: function() { to bar: 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

According to the docs:

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.

Therefore, try this:

computed: {
  bar: function(): string {
    return this.foo;
  }
}