Typescript Error Property does not exist on type (TS2339, TS2365)

Question

I have file HorizontalBarChartObeya.vue and below is the source code

<template>
  <Bar
    :chart-options="chartOptions"
    :chart-data="chartData"
    :chart-id="chartId"
    :dataset-id-key="datasetIdKey"
    :css-classes="cssClasses"
    :styles="styles"
    :width="width"
    :height="height"
  />
</template>

import { Bar } from "vue-chartjs";
import ChartDataLabels from "chartjs-plugin-datalabels";

import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
} from "chart.js";
import { max } from "moment";

ChartJS.register(
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  ChartDataLabels,
);

export default {
  name: "BarChart",
  components: {
    Bar,
  },
  props: {
    chartId: {
      type: String,
      default: "bar-chart",
    },
    datasetIdKey: {
      type: String,
      default: "label",
    },
    width: {
      type: Number,
      default: 4,
    },
    height: {
      type: Number,
      default: 4,
    },
    cssClasses: {
      default: "",
      type: String,
    },
    styles: {
      type: Object,
      default: () => {},
    },
    plugins: {
      type: Array,
      default: () => [],
    },
    dataObeya: {
      type: Array,
      default: "",
    },
    dataLabels: {
      type: Array,
      default: "",
    },
    maxNumber: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      chartData: {
        labels: this.dataLabels,
        datasets: [
          {
            borderRadius: 16,
            borderSkipped: false,
            backgroundColor: ["#2F5DE5", "#FA236E", "#49E366"],
            borderColor: [],
            pointBorderColor: "#2554FF",
            data: this.dataObeya,
            datalabels: {
              anchor: "end",
              align: "end",
            },
          },
        ],
      },
      chartOptions: {
        barThickness: 24,
        indexAxis: "y",
        responsive: true,
        plugins: {
          legend: {
            display: false,
          },
          tooltip: {
            callbacks: {
              title: function () {
                return `Total Post Obeya`;
              },
            },
          },
        },
        scales: {
          x: {
            beginAtZero: true,
            max: this.maxNumber + 5,
            ticks: {
              display: false,
            },
            grid: {
              display: false,
            },
          },
          y: {
            ticks: {
              display: true,
              crossAlign: "far",
            },
            grid: {
              display: false,
            },
          },
        },
      },
    };
  },
  watch: {
    dataObeya: function () {
      this.chartData.datasets[0].data = this.dataObeya;
    },
    maxNumber: function () {
      this.chartOptions.scales.x.max = this.maxNumber + 5;
    },
  },
};

and I got these errors

The application still running correctly but it disturbs me so much because I have another chart component called BarChart.vue but no error found there. Can someone please help me? Thank you

I tried find the solutions but still can't remove the errors, I expect the errors will be gone for now

Answer 1

the reason is because in the script i use lang="ts" which is unecessary so i remove the lang and resolved the problem, thank you