如何将 TypeScript 数组转换为类的泛型数组答案

【问题标题】：How to convert TypeScript array to generic array of class如何将 TypeScript 数组转换为类的泛型数组
【发布时间】：2023-02-05 00:30:54
【问题描述】：

我有 JSON 源数组，所有值都是字符串。我正在尝试将其转换为另一个类型化对象数组。我收到错误。如何正确编写此代码？谢谢。

错误一：类型 '({ Id: string; CompanyName: string; ...)[]' 到类型 'Dest' 的转换可能是错误的，因为两种类型都没有充分重叠。如果这是故意的，请先将表达式转换为“未知”。

错误 2： ../grid-second.component.ts:12:10 - 错误 TS2740：类型“Dest”缺少类型“any[]”中的以下属性：length、pop、push、concat 等 26 个。 12 公共网格数据：任何 [] = 目的地；

export const source = [{
    'Id': 'ALFKI',
    'CompanyName': 'Alfreds Futterkiste',
    'DOB': '01/31/2000' // may not exists
}, {
    'Id': 'ANATR',
    'CompanyName': 'Ana Bokov Emparedados y helados',
}, 

export class Dest{
    public Id: string = "";
    public CompanyName: string = "";
    public DOB?: Date
}

export const destination = <Dest>source;  // Error 1.

在 Angular 组件中：

public gridData: any[] = destination;  // Error 2.

【问题讨论】：

标签： arrays json angular typescript class

【解决方案1】：

为此，我喜欢使用Object.assign()。通常我在 RXJS Map 中执行此操作，作为从服务器取回数据的一部分。

但是，您也可以使用 array map 函数：

newSource = source.map(element => Object.assign(new Dest(),  element));

虽然，给定你的代码，使用硬编码数组我可能只是直接创建值作为数组创建的一部分，而不是稍后处理它：

export const source = [Object.assign(new Dest, {
    'Id': 'ALFKI',
    'CompanyName': 'Alfreds Futterkiste',
    'DOB': '01/31/2000' // may not exists
}), Object.assign(new Dest, {
    'Id': 'ANATR',
    'CompanyName': 'Ana Bokov Emparedados y helados',
})
]

【讨论】：

public DOB?: Date 在课堂上，不是字符串，我想在这种情况下使用 Object.assign 会有点问题

【解决方案2】：

您可以向您的类添加构造函数并使用 map 创建它的实例：

const source = [{
    'Id': 'ALFKI',
    'CompanyName': 'Alfreds Futterkiste',
    'DOB': '01/31/2000' // may not exists
}, {
    'Id': 'ANATR',
    'CompanyName': 'Ana Bokov Emparedados y helados',
}]; 

export class Dest{
    public Id: string = "";
    public CompanyName: string = "";
    public DOB?: Date

    constructor(id: string, companyName: string, dob: string | undefined){
        this.Id = id;
        this.CompanyName = companyName;

        // TODO: not seeing Timezone in source objects.
        this.DOB = dob ? new Date(dob): undefined;
    }
}

export const destination: Dest[] = source.map(x => new Dest(x.Id, x.CompanyName, x.DOB));

【讨论】：