如何在打字稿中将新的接口类型插入到数组中答案

【问题标题】：How to insert new interface types into an array in typescript如何在打字稿中将新的接口类型插入到数组中
【发布时间】：2018-08-17 07:57:49
【问题描述】：

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

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 的多个对象生成到数组中。

这里是接口声明：

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 开发者工具中：

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

【问题讨论】：

你能告诉我们ChartDataSets类型的声明吗？
是的，您能否提供有关您的 this.buildDatasets 方法的类型和详细信息。此外，您可以使用类似这样的语法来稍微清理一下const chartDataSets = data.concat(otherData).map(e => this.buildDatasets(e, timeSpan));
ChartDatasets 包含您在第一个示例中看到的所有属性。只是为了进行类型检查。 Buildchartdatasets 方法映射服务返回的部分实体

标签： javascript arrays angular typescript

【解决方案1】：

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

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

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

buildDatasets(element: T, timeSpan): ChartDataSets

T 类型是每个返回的 element 的类型。所以data 和otherData 必须是T[] 类型。

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

【讨论】：

是的，确实元素参数的类型是ServiceResponse，方法的返回类型是ChartDatasets。他们都像你说的，但我一直只得到一个对象的数组
能否提供ServiceResponse和ChartDataSets的接口声明，buildDatasets的源代码，data变量的示例以及由此生成的chartDataSets数组?
我已经编辑了我原来的问题，如果您需要更多信息，请告诉我

【解决方案2】：

我可以解决我的问题，我就是这样做的：

let chartDataSets: Array<ChartDataSets> = new Array<ChartDataSets>();
let chartPoints: Array<ChartPoint> = new Array<ChartPoint>();

this._service.getData().subscribe(data => {
   data.forEach(element => {
       chartPoints.push(this.buildDatasets(element, timeSpan));
   });

   chartDataSets.push({
       data: chartPoints
   })
});

这是 buildDatasets 的签名：

protected buildDatasets(element: EacSubmissionResponseModel, timeSpan: TimeSpan = TimeSpan.Day): ChartPoint

【讨论】：