유형 스크립트를 사용한 사후 대응형 Vue Chart.js 구성 요소.js 구성 요소

유형 스크립트를 사용한 사후 대응형 Vue Chart.js 구성 요소.js 구성 요소

vue-property-decorator 사용(또는 실제로 vue-property-decorator 사용)Component그리고.Propvue-class-component) 및 vue-chartjs-typescript를 작성하려고 합니다.BarChart-속성을 가진 컴포넌트chartData그리고.options다음 코드는 실제로 앱을 사용할 때 작동합니다.

<script lang="ts">
  import { Bar, mixins } from 'vue-chartjs-typescript'
  import Vue from 'vue'
  import { Component, Prop } from 'vue-property-decorator'
  const { reactiveProp } = mixins

  @Component({
    extends: Bar,
    mixins: [reactiveProp],
  })
  export default class BarChart extends Vue {
    @Prop()
    chartData: any

    @Prop({default: function () { return {} }})
    options!: object

    mounted() {
      this.renderChart(this.chartData, this.options)
    }
  }
</script>

그러나 앱을 빌드할 때 실패합니다.또, IDE(PyCharm Pro)에서도 같은 에러가 발생합니다.

TS2339: 유형 'barChart'에 속성 '렌더차트'가 없습니다.

이 때문에,@Component({extends: Bar})인터프리터의 경우 이 컴포넌트가 확장되는지 여부가 명확하지 않습니다.Bar전 이미 이 모든 것들을 확장하려고 노력했습니다Bar대신Vue,그렇게export default class BarChart extends Bar그러나 다음과 같은 오류가 발생합니다.

유형 오류:슈퍼 표현식은 null이거나 함수여야 합니다.

이 문제를 해결할 방법이 있나요?

클래스 내에서 사용할 함수를 명시적으로 정의할 수 있습니다.BarChart

  public renderChart!: (chartData: any, options: any) => void

언급URL : https://stackoverflow.com/questions/58166163/reactive-vue-chart-js-component-using-typescript