VueJS 2 + TypeScript: 계산된 값이 데이터에 의해 정의된 속성을 감지하지 않음

VueJS 2 + TypeScript: 계산된 값이 데이터에 의해 정의된 속성을 감지하지 않음

다음 컴포넌트:

<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

class-style component 구문을 사용할 때는 이러한 오류가 발생하지 않지만, 이러한 구문은 사용하지 않는 것이 좋습니다.VueJS 컴포넌트의 유형을 정의할 때 권장되는 접근법이 있습니까?

저장소 복제 완료/최소화: https://github.com/davidRoussov/vue-typescript-error

Vue 매뉴얼의 "Typescript Support" 섹션에서 설명한 바와 같이 다음과 같습니다.

당신의 경우, 당신은 변해야 합니다.bar: function() {로.bar: function(): string {

vNode 주석 없이 값을 반환하는 render() 메서드가 있는 경우에도 동일한 오류가 발생할 수 있습니다.

문서에 따르면:

Vue 선언 파일의 순환 특성 때문에 TypeScript는 특정 메서드의 유형을 추론하는 데 어려움이 있을 수 있습니다.따라서 렌더 및 계산된 메서드와 같은 메서드에 반환 유형에 주석을 추가해야 할 수 있습니다.

이 때문에, 다음과 같이 해 주세요.

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

언급URL : https://stackoverflow.com/questions/69694873/vuejs-2-typescript-computed-value-does-not-detect-property-defined-by-data