vue-chartjs+TypeScriptでClass ” incorrectly extends base class ‘Bar & ReactivePropMixin & …

2020年10月4日

今回はvue-chartjs+TypeScriptを使用しているときに、「class " Class " incorrectly extends base class 'Bar & ReactivePropMixin & Vue & object & Record'.
Type " is not assignable to type 'ReactivePropMixin’.
Property 'chartData’ is private in type " but not in type 'ReactivePropMixin’.」というエラーが出たときの対処法についてご紹介いたします。

vue-chartjs+TypeScriptでClass " incorrectly extends base class 'Bar & ReactivePropMixin & …

vue-chartjsとTypeScript環境で開発を行っているときのことです。
上記のエラーが出てしまいました。

このときのソースコードは下記のようなコードでした。

<template>
  <BaseChart :chartData="chartData" :chartOptions="chartOptions" />
</template>

<script lang="ts">
import { Component, Mixins } from "vue-property-decorator";
import { Bar, mixins } from 'vue-chartjs';
import Chart from "chart.js";
import BaseChart from "@/chart/BaseChart.vue";

const dataLabel: string[] = ['test'];

const data: number[] = [1]

@Component({
  components: {
    BaseChart
  }
})
export default class testChart extends Mixins(Bar, mixins.reactiveProp) {

  private chartData: Chart.ChartData = {
    labels: dataLabel,
    datasets: [
      {
        label: 'aaa',
        data: data,
        backgroundColor: "rgba(255,0,0,0.5)"
      }
    ]
  }

  private chartOptions: Chart.ChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      yAxes: [{
        ticks: {
          suggestedMin: 0,
          callback: function(value: number){
            return  value +  '個'
          }
        }
      }]
    }
  }
}
</script>

</template>

import { Component, Mixins } from "vue-property-decorator";

import { Bar, mixins } from 'vue-chartjs';

import Chart from "chart.js";

import BaseChart from "@/chart/BaseChart.vue";

const dataLabel: string[] = ['test'];

const data: number[] = [1]

@Component({

components: {

BaseChart

}

})

export default class testChart extends Mixins(Bar, mixins.reactiveProp) {

private chartData: Chart.ChartData = {

labels: dataLabel,

datasets: [

{

label: 'aaa',

data: data,

backgroundColor: "rgba(255,0,0,0.5)"

}

]

}

private chartOptions: Chart.ChartOptions = {

responsive: true,

maintainAspectRatio: false,

scales: {

yAxes: [{

ticks: {

suggestedMin: 0,

callback: function(value: number){

return value + '個'

}

}]

}

</script>

上記のコードのとき、VS Code上でclassを定義するtestChartのところにマウスカーソルを乗せると上記のエラーが出ます。

結論から言うと、上記ソースコードだとchartDataがprivateになっていますが、publicにすることで上記エラーが消えます。
こんな感じですね。

  public chartData: Chart.ChartData = {
    labels: dataLabel,
    datasets: [
      {
        label: 'aaa',
        data: data,
        backgroundColor: "rgba(255,0,0,0.5)"
      }
    ]
  }

public chartData: Chart.ChartData = {

labels: dataLabel,

datasets: [

{

label: 'aaa',

data: data,

backgroundColor: "rgba(255,0,0,0.5)"

}

]

}

おそらくですが、vue-chartjsのGitHubのソースコードを見てみると、watchでchartDataを見ているので、privateのままだとvue-chartjsからchartDataを見れないのでエラーが出るわけですね。
https://github.com/apertureless/vue-chartjs/blob/develop/src/mixins/index.js#L95-L97