Angular 2（打字稿）将 Json 转换为 Object[]答案

【问题标题】：Angular 2 (typescript) Cast Json to Object[]Angular 2（打字稿）将 Json 转换为 Object[]
【发布时间】：2017-12-22 01:24:31
【问题描述】：

我有一个服务器，它有一个路由（例如 /users），它以 json 形式返回用户列表。我想在我的 typeScript 中将响应 json 转换为我的用户模型数组。

现在我有这样的东西：

user.service.ts：

searchUser() : void {
    return this.http.get('http://127.0.0.1:3000/users/' + this.serializeUrlParam({}))
                    .toPromise()
                    .then(response => response.json() as User[])
                    .catch();
}

我的用户.ts：

export class User {
    infos: Object;
}

我在哪里使用我的服务：

service.searchUser().then(userList=> {
        console.dir(userList)
});

当我显示response.json() 的返回值时，我有这个对象：

{
    users: [
        { 
            Data : {
                ID : 1,
                Name : "foo",
                ....
            }
        },
        ....
    ]
}

当我显示最终数据（应该是用户数组）时，我有完全相同的对象。

有没有办法让 as 运算符为 response.json() 返回的“用户”数组的每个条目创建用户实例，并复制“信息”字段中的所有数据（ID、名称等） “用户”模型？如果可能的话，通过覆盖我的 User 模型上的 as 运算符？

我想知道是否有其他方法可以手动循环每个字段，创建一个用户实例将其推送到“结果”数组。

谢谢

【问题讨论】：

实际上当你运行应用程序时。没有创建用户类实例。因此，如果您想将数据放置在某个特定字段中或创建这些实例，您必须明确地执行此操作。我会在后端创建这个结构。
这不是打字稿中类型和接口的想法。不，您不能覆盖“as”运算符或任何其他运算符。我将更改为 .then(response => response.json().users as User[]) 并将 User 类更改为具有 Data: {Id: number; Name: string} 的接口。
你必须做类似response.json().users.map(rawUser => createUserFrom(rawUata))
谢谢大家，@jonrsharpe 这正是我想要的行为类型。这被认为是“面向良好打字稿”的方法吗？还是“最好不要这样做”？
信息太少，很难说清楚。 User 类目前似乎完全没有意义： 1. 如果您没有任何行为来处理数据，您可以使用 interface（在这种情况下您可能不需要显式转换）；和 2.infos: Object 几乎没有提供有关您尝试消费用户时会发生什么的有用信息。

标签： angular typescript casting

【解决方案1】：

我同意 cmets，你可以很好地使用接口，事实上我很可能会自己做，即使 Angular 样式指南建议使用类：https://angular.io/guide/styleguide#interfaces

这是您的类的解决方案（没有构造函数）。我要做的是真正想从您的响应中删除 Data 属性并最终得到这样的类：

export class User {
  ID: number;
  Name: string;
  ....
}

以下是如何制作上述类的对象，我们首先映射数组，然后从Data 对象创建User 类的实例：

searchUser() : void {
  return this.http.get('http://127.0.0.1:3000/users/' + this.serializeUrlParam({}))
    .toPromise()
    .then(response => response.json().users.map(user =>
        Object.assign(new User(), user.Data)))
    .catch();
}

现在我们得到了一个包含上述User 类实例的数组。

【讨论】：