Property 'renderChart' does not exist on type 'LineChartComponent'

Question

The following code is working but throwing a TSLint/TS error in my console

// 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
                }
            ]
        });
    }
}

The error is:

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

I believe this has to do with this not properly referencing the @component extend of Line. If I manually create a method on the component I am able to get rid of this error but I should just be able to use this from my understanding...

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

Answer 1

After hours of trying to figure this out this solution worked for me:

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);
  }
}