json - 使用 TypeScript 解析复杂的 json 对象

Question

如何使用 TypeScipt 解析复杂的 json 对象？

我有一个客户对象，他有一些发票。

这是我的模型:

export class Customer {
    public id: string;
    public name: string;
    public invoices: CustomerInvoice[];

    get invoicesCount(): number {
        if (this.invoices== null) {
            return 0;
        }
        return this.invoices.length;
    }

     constructor() {
     }
}

export class CustomerInvoice {
     public id: number;

     constructor() {
     }
}

在我的服务中，我有:

ngOnInit() {
    if (this.id != null) {
        this.dataService.getCustomer(this.id).subscribe(data => {
            this.customer = data;
        },
            err => console.log(err));
    }
}

客户数据很好(我的客户 ID、姓名等有一些值)但发票为空。

json 正确，data.Invoices.length 返回一个数字。

Answer 1

How can I parse complex json object with TypeScipt ?

假设您的意思是将 JSON 解析为实际的类实例而不是简单的 Javascript 对象，则 TypeScript 没有提供此功能现成的。

您可以创建一个接口(interface)声明，使用它您可以执行 type-assertion (不是类型cast)有点模仿类型安全如果 JSON 是可信的，但仅此而已——我知道没有本地工具可以将 JSON 序列化为实际实例用户定义的类型。

interface ICustomerInvoice {
    id: number;
}

interface ICustomer {
    id: string;
    name: string;
    invoices: ICustomerInvoice[];
}

var customer: ICustomer = JSON.parse(json) as ICustomer;

---

然而，出于同样明显的原因，我开始整理 TypedJSON将此功能引入 TypeScript。您可以使用 JsonObject 和 JsonMember 装饰器来注释您的类和成员:

@JsonObject
export class CustomerInvoice {
    @JsonMember
    public id: number;
}

@JsonObject
export class Customer {
    @JsonMember
    public id: string;

    @JsonMember
    public name: string;

    @JsonMember({ elementType: CustomerInvoice })
    public invoices: CustomerInvoice[];

    get invoicesCount(): number {
        if (this.invoices== null) {
            return 0;
        }
        return this.invoices.length;
    }
}

要反序列化 JSON 字符串，您可以使用 TypedJSON.parse 而不是 JSON.parse，getter 也会按预期出现:

var customer = TypedJSON.parse(json, Customer);
typeof customer.invoicesCount; // "number"    

推荐与ReflectDecorators一起使用(但不是必需的)。如果您选择跳过此推荐，您还需要指定成员的“类型”设置，例如:

@JsonMember({ type: String })
public id: string;