Property 'y' does not exist on type 'number'

Question

I am working on creating a project with Vue.js and Quasar using TypeScript, but here, I have got errors telling me as below :

Property 'y' does not exist on type 'number | { x: number[]; y: number[]; }'. Property 'y' does not exist on type 'number'.

I know what it means, but I really have no idea how to solve this error since I reckon that y should exist on type number.

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  data() {
    return {
      filteredName: 'All',
      chartOptionsClickQty: chartOptions.lineChart,
      chartOptionsRevBuy: chartOptions.mixedChart,
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initChartOptions() {
      const { timePeriod } = this;
      const { currentStartDate, currentEndDate } = this.analysticFilter;

      const buyRatioRows = this.getRowsPerDateBuyRatio(
        timePeriod.current,
        new Date(currentStartDate),
        new Date(currentEndDate)
      );

      const revenueRows = this.getRowsPerDate(
        timePeriod.current,
        new Date(currentStartDate),
        new Date(currentEndDate),
        'revenue'
      );

      const revenueChartData = {
        key: this.filteredName,
        values: revenueRows,
      };

      const buyRatioChartdata = {
        key: this.filteredName,
        values: buyRatioRows,
      };


      this.chartOptionsRevBuy = Object.assign({}, this.chartOptionsRevBuy, {
        chart: { height: 385 },
        xaxis: { categories: revenueChartData.values.x },
        yaxis: [
          {
            title: {
              text: 'Text1',
            },
            forceNiceScale: true,
            min: 0,
            max: Math.max(...revenueChartData.values.y) + 20,
            labels: {
              formatter: function (val: number) {
                return val.toFixed();
              },
            },
          },
          {
            opposite: true,
            title: {
              text: 'Text2',
            },
            min: 0,

            // --- This is where the error occurs..
            max: Math.max(...buyRatioChartdata.values.y) + 20,
            labels: {
              formatter: function (val: number) {
                return val.toFixed();
              },
            },
          },
        ],
      });


      this.seriesRevBuy[0].name = 'Total Price(￦)';
      this.seriesRevBuy[0].data = revenueChartData.values.y;
      this.seriesRevBuy[1].name = 'Ratio(%)';

      // --- Here `y` as well
      this.seriesRevBuy[1].data = buyRatioChartdata.values[0].y;
      this.seriesRevBuy[1].data = buyRatioChartdata.values[0].y.map(
        (item: number) => item.toFixed(1)
      );
    },
    async initData() {
      this.initChartOptions();

    },
    getRowsPerDateBuyRatio(
      items: any[],
      queryStartDate: Date,
      queryEndDate: Date
    ) {
      ....

      // --- Here is the part where the error comes I guess
      let yMax = [] as Array<number>;

      items.forEach(function (item) {
        let buyRatio = (item.clickSessions * 100) / item.users;
        item.buyRatio = Math.min(100, buyRatio);

        // --- I even changed this `string` into `number`
        yMax.push(item.buyRatio.toFixed() as number);
        let created = new Date(item.created);
        valuePerDate[created.getTime()] = item.buyRatio;
      });

      const rows = {
        x: [] as Array<number>,
        y: [] as Array<number>,
      };

      const y = Math.max.apply(null, yMax);
      periodArray.forEach(function (created) {
        rows.x.push(created.getTime());
        rows.y.push(valuePerDate[created.getTime()]);
      });

      return [rows, y];
    },
  },
});
</script>

chartOptions.ts

export const chartOptions = {
   mixedChart: {
    series: [
      {
        name: '',
        type: 'column',
        data: [] as Array<number>,
      },
      {
        name: '',
        type: 'line',
        data: [] as Array<number>,
      },
    ],
    xaxis: {
      type: 'datetime',
      categories: [] as Array<number>,
      labels: {
        datetimeUTC: false,
      },
    },
    yaxis: [
      {
        title: {
          text: '구매클릭합계',
        },
      },
      {
        opposite: true,
        title: {
          text: '전환율',
        },
      },
    ],
  },
}

This error is obviously from TypeScript. Please let me know what I am missing.

buyRatiochartdata has these types, so in my opinion, y should exist on it..

Answer 1

buyRatioChartdata.values is set to buyRatioRows, created from getRowsPerDateBuyRatio(), which returns an array:

// `rows` is an array of `{ x: number[], y: number[] }`
// `y` is the maximum "buy ratio" in an items list
return [rows, y]

For the first problem you encountered:

max: Math.max(...buyRatioChartdata.values.y) + 20,

buyRatioChartdata.values is an array, which does not have a y property. I think you're trying to get the maximum y-value from the array in buyRatioChartdata.values[0], but that calculation is already stored in buyRatioChartdata.values[1], so you could just use that:

max: (buyRatioChartdata.values[1] as number) + 20,

The second problem is in:

this.seriesRevBuy[1].data = buyRatioChartdata.values[0].y.map((item: number) => item.toFixed(1));

TypeScript can't infer which type to use for buyRatioChartdata.values (as indicated in the error message). You could resolve it with a type assertion to the intended object:

const rows = buyRatioChartdata.values[0] as { x: number[], y: number[] };
this.seriesRevBuy[1].data = rows.y.map((item: number) => item.toFixed(1));