chart.js の使用方法について

Question

Nuxt.jsにおいて、chart.jsを使用しグラフや図を描画するページを作成したいと思い
コードを作成しました。
componentsディレクトリ内に、chartを描画するコンポーネントファイル”ChartLine.vue”を作成したのですが、@Propとして、chartを表示する親のコンポーネントに渡す部分にコードにおいて下記のエラーが
表示され、動作を確認することができません。

＜エラーメッセージ＞
Property 'chartData' has no initializer and is not definitely assigned in the constructor

Propで指定している部分の型については、"vue-chartjs"を参照しており、
エラーの修正方法がわからず困っております。
どなたかご教示いただけませんでしょうか？

テストに使用したサンプルコードを下記に貼らせていただきます。
components/CartLine.vue

<script lang="ts">
import { Component, Vue, Prop, Watch, mixins } from "nuxt-property-decorator";
import Chart from "chart.js";
import VueChart from "vue-chartjs";
const Line = VueChart.Line;
const reactiveProp = VueChart.mixins.reactiveProp;

@Component
export default class ChartLine extends mixins(Line, reactiveProp) {
  @Prop({ default: {} }) chartData: Chart.ChartData;
  @Prop({ default: {} }) options: Chart.ChartOptions;

  mounted() {
    this.renderChart(this.chartData, this.options);
  }
}
</script>

chartを画面に表示するファイル。

<template>
  <div class="chart-container">
    <ChartLine
      :chartData="chartData"
      :options="chartOption"
      :styles="chartStyles"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'nuxt-property-decorator'
import { ChartData, ChartOptions } from 'chart.js'
import ChartLine from '~/components/ChartLine.vue'

@Component({ components: { ChartLine } })
export default class ChartPage extends Vue {
  private chartData: ChartData = {
    labels: ['A', 'B', 'C', 'D', 'E'],
    datasets: [
      {
        label: 'Data One',
        data: [1, 5, 3, 4, 3],
      },
      {
        label: 'Data Two',
        data: [10, 50, 30, 40, 30],
      },
    ],
  }
  private chartOption: ChartOptions = {
    maintainAspectRatio: false,
  }

  private chartStyles = {
    height: '100%',
    width: '100%',
  }
}
</script>

<style lang="scss">
.chart-container {
  position: relative;
  height: 40vh;
  width: 80vw;
  margin: 0 auto;
}
</style>

Comments

[kuma_kuma_]

> プロパティ 'chartData'には初期化子がなく、コンストラクターで明確に割り当てられていません
Nuxt.jsは不慣れの為、違うかもしれませんが
Chart.ChartDataとしている箇所の前に「chart.js」は読み込まれていますか？
(URLあっていますか？)

Answer 1

Propで指定した各プロパティに論理否定演算子（！）を付けるだけでした。

  @Prop({ default: {} }) chartData!: Chart.ChartData;
  @Prop({ default: {} }) options!: Chart.ChartOptions;