使用 Typescript 的 Reactive Vue Chart.js 组件

Reactive Vue Chart.js component using Typescript

使用 vue-property-decorator (or actually its Component and Prop of vue-class-component) and vue-chartjs-typescript,我试图制作一个具有 chartDataoptions 属性的 BarChart 组件。以下代码在为应用程序提供服务时实际有效:

<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: Property 'renderChart' does not exist on type 'BarChart'.

因此,当使用 @Component({extends: Bar}) 时,解释器并不清楚该组件是否扩展了 Bar。我已经尝试扩展 Bar 而不是 Vue,所以 export default class BarChart extends Bar。但这会产生以下错误:

TypeError: Super expression must either be null or a function

有解决此问题的想法吗?

您可以在 class BarChart

中明确定义要使用的函数
  public renderChart!: (chartData: any, options: any) => void