vue.js - 属性 'renderChart' 在类型 'LineChartComponent' 上不存在

Question

以下代码正在运行，但在我的控制台中引发了 TSLint/TS 错误

// Imports
import Vue from "vue";
import Component from "vue-class-component";
import { Line } from "vue-chartjs";

@Component({
    extends: Line,
    props: {
        chartData: {
            type: Object
        }
    }
})
export default class LineChartComponent extends Vue {
    mounted() {
        this.renderChart({ // <-- This line is the issue
            labels: this.$props.chartData.labels,
            datasets: [
                {
                    data: this.$props.chartData.data,
                    borderColor: "",
                    borderWidth: 4
                }
            ]
        });
    }
}

错误是:

TS2339: Property 'renderChart' does not exist on type 'LineChartComponent'.

我相信这与this有关没有正确引用 Line 的 @component 扩展.如果我在组件上手动创建一个方法，我可以摆脱这个错误，但我应该只能使用 this以我的理解...

private renderChart!: (chartData: any, options?: any) => void; 

Answer 1

经过几个小时的尝试，这个解决方案对我有用:

import Vue from 'vue';
import { Line, mixins as chartMixins } from 'vue-chartjs';
import Component, { mixins } from 'vue-class-component';
import { ChartData } from 'chart.js';

const Props = Vue.extend({
  props: {
    chartData: {
      type: Object as () => ChartData,
      default: undefined
    },
    options: {
      type: Object as () => ChartOptions,
      default: undefined
    }
  }
});

@Component({
  extends: Line,
  mixins: [chartMixins.reactiveProp]
})
export default LineChart extends mixins(Props, Line) {
  mounted(): void {
    this.renderChart(this.chartData, this.options);
  }
}