javascript - 如何在 typescript 中将新的接口(interface)类型插入数组

Question

我想要实现的是拥有这种结构类型:

let chartDataSets: Array<ChartDataSets> = new Array<ChartDataSets>();
chartDataSets = [
                {
                    backgroundColor: "#29b6f6",
                    borderColor: "#0086c3",
                    pointHoverBorderColor: "#0086c3",
                    pointHoverBackgroundColor: "#73e8ff",
                    pointRadius: 3.5,
                    fill: false
                },
                {
                    backgroundColor: "#f44336",
                    borderColor: "#ba000d",
                    pointHoverBorderColor: "#ba000d",
                    pointHoverBackgroundColor: "#ff7961",
                    pointRadius: 3.5,
                    fill: false
                }
            ]

通过这样做:

data.forEach(element => {
                chartDataSets.push(this.buildDatasets(element, timeSpan));
            });
otherData.forEach(otherElement => {
                chartDataSets.push(this.buildDatasets(otherElement, timeSpan));
            });

我必须这样做，因为我不知道数组将有多少个对象。因此，我需要迭代从服务返回的数据，以便了解数组中将有多少个对象。但我使用push命令实现的是仅生成一个对象的数组，而不是在数组中生成多个ChartDataSets对象。

以下是接口(interface)声明:

export interface ServiceResponse {
    Date: Date;
    Amount: number;
    Precision: number;
}

export interface ChartDatasets {
     data: ChartPoint[],
     backgroundColor: string,
     borderColor: string,
     pointHoverBorderColor: string,
     pointHoverBackgroundColor: string,
     pointRadius: number,
     fill: boolean
}

export interface ChartPoint {
    x: number | string | Date
    y: number
}

方法 buildChartDatasets 声明:

protected buildDatasets(element: EacSubmissionResponseModel, timeSpan: TimeSpan = TimeSpan.Day): ChartDataSets {
        let chartDataset: ChartDataSets = {};

        let chartResponse: ChartPoint[] = [{
            x: element.Date,
            y: element.Amount
        }]

        chartDataset.data = chartResponse;

        return chartDataset;
    }

这是我得到的响应，显示在 Chrome 开发者工具中:

第一个是我想要的结果，第二个是我实际得到的结果。希望这足够清楚。

Answer 1

所以，如果我理解得很好，您有一个服务返回您的 data 和 otherData 变量，它们是 element 的数组。

然后，您必须将每个元素单独提供给this.buildDatasets以获取ChartDataSets，然后将每个返回值推送到您的chartDataSets数组。

这意味着 this.buildDatasets 具有以下签名:

buildDatasets(element: T, timeSpan): ChartDataSets

类型T是返回的每个元素的类型。因此 data 和 otherData 必须是 T[] 类型。

请检查 data 变量的类型以及 this.buildDatasets 的返回类型。