使用打字稿的Reactive Vue Chart.js组件

Question

使用vue-property-decorator（或实际上是Component的Prop和vue-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'上不存在属性'renderChart'。

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

TypeError：超级表达式必须为null或函数

任何想法如何解决此问题？

Answer 1

您可以在类BarChart中明确定义要使用的函数

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