如何将 JSON 对象转换为 TS 类

Question

我正在尝试将 Django 响应转换为 Angulars User 数组。有几个原因，例如不同的变量名称（first_name 与 firstName）以及 Angular User 构造函数内部有一些逻辑。

简单地说 Django User => Angular User

服务器响应示例：

[
  {"id":2,"email":"test1@test.com","first_name":"Name 1","client":{"id":1}}},
  {"id":3,"email":"test2@test.com","first_name":"Name 2","client":{"id":2}}}
]

我想要的是转换成这种格式：

export class User {
    // contructor that transforms
    id: number;
    email: string;
    firstName: string;
    isClient: boolean = false;
}

我目前已经“解决”了这个问题，但我想知道是否有更好的解决方案。

内部something.service.ts

public getClients(): Observable<User[]> {
    return this.http.get(this.getClientsUrl)
    .map(r => r.json() || []).map(x => x.map(y => new User(y)));
}

当我说更好的解决方案时，虽然这可行，但它看起来不太可读。如果你这样做一次不是问题，但是当你有很多请求时，你会开始考虑一个更好的解决方案（一种处理这个问题的方法？）。有什么更好的方法？有点像拥有

return this.http.get(this.getClientsUrl)
.map(transformResponse);

Answer 1

我找到的一个解决方案（在 Roman C 的一些帮助下）是扩展 Service 类。此解决方案适用于 Array 和 Object 响应。

export class ServiceUtils {
    protected transformResponse(response: Response, myClass: any) {
        let body = response.json();

        if (body.constructor === Array) {
            return body.map(element => new myClass(element)) || []
        } 

        return new myClass(body) || new myClass();
    }
}

使用如下：

export class SomeService extends ServiceUtils {

    constructor(private http: Http) {
        super(); // Unfortunate side effect
     }

    public getClients(): Observable<User[]> {
        return this.http.get(this.getClientsUrl)
        .map(response => this.transformResponse(response, User));
    }
}

---

编辑：

一个更好的解决方案（不扩展Service）：

import { Response } from '@angular/http';


export class ServiceUtils {
    public static transformResponse(response: Response, myClass: any) {
        let body = response.json();

        if (body.constructor === Array) {
            return body.map(element => new myClass(element)) || []
        } 

        return new myClass(body) || new myClass();
    }
}

并使用它：

public getClients(): Observable<User[]> {
    return this.http.get(this.getClientsUrl)
    .map(r => ServiceUtils.transformResponse(r, User));
}

Answer 2

如果您以不同的方式格式化您的代码并使用更明确定义的名称，它会更易读，例如

public getClients(): Observable<User[]> {
    return this.http.get(this.getClientsUrl)
        .map(response => response.json() || [])
        .map(users => users.map(user => new User(user)));
}

我创建了一个codepen example，它会注销格式正确的服务器响应。

从另一个答案中读取你的一个 cmets：

类似这样的东西，但我希望 transformResponse 只实现一次，这意味着它也应该接受类作为参数。

我认为你想要TypeScript generics，它可能看起来像这样：

public getClients<T>(type: T): Observable<T[]> {
    return this.http.get(this.getClientsUrl)
        .map(response => response.json() || [])
        .map(clients => clients.map(client => new type(user)));
}

如果你想结合 Roman C 的方法：

public getClients(): Observable<User[]> {
    return this.http.get(this.getClientsUrl)
        .map(response => response.json() || [])
        .map(users => users.map(user => this.mapServerResponse<User>(user, User)));
}

mapServerResponse<T>(response, type: T): T {
    return new type(response);
}

Answer 3

一个TS界面是这样的：

interface SquareConfig {
    color: string;
    width?: number;
    enabled: boolean;
}

您想将给定对象转换为 TS 接口（真的），还是想让响应对象更具可读性？这完全不同。
因为上面例子中的“我要什么”不是TS接口。

Answer 4

应该是这样的

return this.http.get(this.getClientsUrl)
.map(r => this.transformResponse(r));