属性 'y' 在类型 'number' 上不存在

Question

我正在使用 TypeScript 创建一个带有 Vue.js 和 Quasar 的项目，但是在这里，我收到如下错误提示：

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

我知道这是什么意思，但我真的不知道如何解决这个错误，因为我认为 y 应该存在于 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: '전환율',
        },
      },
    ],
  },
}

这个错误显然来自TypeScript。请让我知道我缺少什么。

buyRatiochartdata有这些类型，所以在我看来，y应该存在..

Answer 1

buyRatioChartdata.values 设置为 buyRatioRows，从 getRowsPerDateBuyRatio() 创建，其中 returns 一个数组 :

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

对于您遇到的第一个问题：

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

buyRatioChartdata.values 是一个数组，它没有 y 属性。我认为您正在尝试从 buyRatioChartdata.values[0] 中的数组中获取最大 y 值，但该计算已存储在 buyRatioChartdata.values[1] 中，因此您可以只使用它：

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

第二题在：

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

TypeScript 无法推断 buyRatioChartdata.values 使用哪种类型（如错误消息中所示）。您可以通过对预期对象的类型断言来解决它：

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

属性 'y' 在类型 'number' 上不存在

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

typescript

vue.js

quasar