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

it is recommended when you use typescript with vue you should also annotate return types for computed properties so if you just add return type to computed property the error will be gone — Bhumit 070
– Bhumit 070, Commented Oct 24, 2021 at 8:11

tony19 · Accepted Answer · 2022-07-16 00:11:57Z

5

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.

edited Jul 16, 2022 at 0:11

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 24, 2021 at 8:10

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 03:06:05Z

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

edited Jul 16, 2022 at 3:06

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 24, 2021 at 8:11

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related