如何将TypeScript字符串JSON数组转换为泛型类数组？

错误原因分析 #

• 错误1：source是数组类型（{Id: string; CompanyName: string; DOB?: string}[]），你却将其强制断言为单个Dest对象，两种类型完全不匹配，TypeScript因此报错。
• 错误2：由于destination被错误断言为单个Dest对象，而gridData声明为数组类型（any[]），单个对象不具备数组的length、push等属性，导致类型不兼容。

正确实现代码 #

要完成JSON数组到Dest对象数组的转换，需要遍历源数组，逐个将元素转换为Dest类型，同时手动处理字符串到Date的类型转换（因为类型断言无法完成实际的类型转换）。

方式1：创建Dest类实例（适合Dest包含方法的场景） #

export const source = [{
    'Id': 'ALFKI',
    'CompanyName': 'Alfreds Futterkiste',
    'DOB': '01/31/2000' // 可能不存在
}, {
    'Id': 'ANATR',
    'CompanyName': 'Ana Bokov Emparedados y helados',
}];

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

// 转换源数组为Dest数组
export const destination: Dest[] = source.map(item => {
  const destInstance = new Dest();
  destInstance.Id = item.Id;
  destInstance.CompanyName = item.CompanyName;
  // 处理DOB：存在则转换为Date，否则留空
  if (item.DOB) {
    destInstance.DOB = new Date(item.DOB);
  }
  return destInstance;
});

方式2：对象字面量映射（适合Dest仅为数据结构的场景） #

如果Dest只是纯数据类，没有自定义方法，可以直接用对象字面量生成符合类型的对象：

export const destination: Dest[] = source.map(item => ({
  Id: item.Id,
  CompanyName: item.CompanyName,
  DOB: item.DOB ? new Date(item.DOB) : undefined
}));

Angular组件中正确赋值 #

建议将gridData声明为Dest[]而非any[]，获得TypeScript的类型校验：

public gridData: Dest[] = destination;

内容的提问来源于stack exchange，提问作者sam sergiy klok