javascript - 如何在不丢失 TypeScript 类属性的情况下将 JSON 对象列表转换为 TypeScript 对象列表？

Question

我有这个客户类:

export class Customer {
    id: number;
    company: string;
    firstName: string;
    lastName: string;

    name(): string {
        if (this.company)
            return this.company;
        if (this.lastName && this.firstName)
            return this.lastName + ", " + this.firstName;
        if (this.lastName)
            return this.lastName;
        if (this.firstName)
            return this.firstName;
        if (this.id > 0)
            return "#" + this.id;
        return "New Customer";
    }
}

在我的 Controller 中，我拉下了一个客户列表:

export class CustomersController {
    static $inject = ["customerService", "workflowService"];

    ready: boolean;
    customers: Array<Customer>;

    constructor(customerService: CustomerService, workflowService: WorkflowService) {
        customerService.getAll().then(
            (response) => {
                this.customers = response.data;
                this.ready = true;
            },
            () => {
                this.ready = true;
            }
        );
        workflowService.uiCustomer.reset();
    }
}
angular.module("app")
    .controller("CustomersController", ["customerService", "workflowService", CustomersController]);

如果有帮助，getAll() 看起来像这样:

    getAll(): ng.IHttpPromise<Array<Customer>> {
        return this.http.get("/api/customers");
    }

正是这句话让我感到悲伤:this.customers = response.data;

但是 response.data 是强类型的，所以它不应该“知道”Customer 和 name() 吗？

当我这样做时，我当然会用愚蠢的 JSON 覆盖我的强类型数组，它上面没有我的 name() 方法。

那么如何在不复制列表中每个对象的每个属性的情况下保留我的名称方法？

这是我的糟糕设计吗？拥有这些只读属性在 C# 中非常普遍，但我对 javascript 世界有点陌生。我应该改用实用程序类吗？

我目前的解决方法:

this.customers = response.data.map(customer => {
    return angular.copy(customer, new Customer());
});

构建一个全新的数组并复制所有这些字段感觉不对(在我的真实项目中 Customer 有更多的属性)。

编辑:我发现了一些相关的 SO 问题，例如 Mapping JSON Objects to Javascript Objects正如@xmojmr 所提到的。我的问题是特定于 TypeScript 的，我想知道 TypeScript 是否有任何自己的工具可以生成 javascript 来使这不是问题。如果不是这种情况，并且我们确定 TypeScript 不旨在解决此类问题，那么我们可以将此问题视为重复问题。

Answer 1

您对正在发生的事情完全正确。键入 typescript 主要为您提供编译器检查。在幕后，所有内容都会编译为非强类型的 JavaScript。

所以，当你说:

getAll(): ng.IHttpPromise<Array<Customer>> {
    return this.http.get("/api/customers");
}

您真正要做的就是告诉编译器“嘿，我很确定我的 api 端点将返回一个 Customer 对象数组。”但如您所知，它实际上只返回一个“愚蠢的 JSON”数组。

您可以考虑创建一个接口(interface)来描述 API 端点返回的 JSON 对象。像这样的东西:

interface ICustomer {
    id: number;
    company: string;
    firstName: string;
    lastName: string;
}

然后 getAll() 变成:

getAll(): ng.IHttpPromise<Array<ICustomer>> {
    return this.http.get("/api/customers");
}

然后您可以拥有一个构造函数将 ICustomer 作为参数的类。或者您可以创建一个带有静态方法的类，该方法采用 ICustomer 并返回“名称”。

显然，您现在所做的工作有效，但我认为您正在寻找能够更好地传达意图的东西是正确的。