Реактивный компонент Vue Chart.js с использованием Typescript

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: свойство 'renderChart' не существует для типа 'BarChart'.

Поэтому при использовании @Component({extends: Bar}), для интерпретатора неясно, что этот компонент распространяется Bar. Я уже пытался расширить Bar вместо Vue, поэтому export default class BarChart extends Bar. Но это приводит к следующей ошибке:

TypeError: Супер-выражение должно быть либо нулевым, либо функцией

Есть идеи, как решить эту проблему?

Answer 1

Вы можете явно определить функцию, которую хотите использовать внутри класса BarChart

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