javascript - VueJS 2 + typescript : computed value does not detect property defined by data

Question

以下组件:

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

导致类型错误:

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

使用类样式的组件语法时不会发生这些类型的错误，但我不希望使用这种语法。是否有推荐的方法在 VueJS 组件上定义类型？
完整/最小的存储库复制在这里:https://github.com/davidRoussov/vue-typescript-error

Answer 1

如 Typescript Support 中所述Vue 文档的部分:
在您的情况下，您应该更改 bar: function() {至bar: function(): string {如果您有一个返回值但没有 : VNode 注释的 render() 方法，您可能会遇到相同的错误。