具有默认值的打字稿类，如何将 JSON 解析为此答案

【问题标题】：Typescript class with default values, how to parse JSON to this具有默认值的打字稿类，如何将 JSON 解析为此
【发布时间】：2018-07-25 16:06:41
【问题描述】：

我有一个A 类型的类。这个类有几个属性，我们称它们为prop1、prop2和prop3。

当我调用API 时，它返回一个代表对象的JSON 字符串，如果某些属性为空，则可能会省略它们。然而，再往前走，这个对象被用来动态地构造一个表单（使用Formik，但这不相关）。该框架期望所有属性都存在，并且一些属性将根据其他属性动态可见。

所以我的问题是，我如何解析JSON 对我的自定义类的响应，在API 响应中省略属性的情况下保留默认值？

我试过的是：

static getCustomer(id) {
        return fetch(process.env.MD_API_URL + 'customers/' + id, { mode: 'cors' })
            .then(response => {
                let cust = new Customer();
                return response.json().then(x => cust = JSON.parse(x));
        }).catch(error => {
            return error;
        });
    }

但这返回未定义。一定是做错了什么……

【问题讨论】：

你已经尝试了什么？

标签： json typescript

【解决方案1】：

因为 typescript 实际上并没有被编译，而是被翻译成 javascript，所以 所有的 javascript 规则都适用。

因此，反序列化 json 实际上不会创建相关类的新实例，但会为您提供一个对象，您可以在设计时“调用”Customer。

但是，您可以创建一个对象，然后像这样分配 json 值：

export class Customer {

   public id: number;
   public name: string;

   // your stuff here
   public myDefaultProp: string = "default value";

   public constructor(init?: Partial<Customer>) {
      Object.assign(this, init);
   }
}

您的回报将如下所示：

return response.json().then(x => new Customer(JSON.parse(x)));

添加了一个示例https://stackblitz.com/edit/typescript-16wlmg

【讨论】：

谢谢！我不需要显式解析，因为它已经是一个有效的 JSON 对象，所以最终结果是： static getCustomer(id) { return fetch(process.env.MD_API_URL + 'customers/' + id, { mode: 'cors ' }) .then(response => { return response.json().then((x) => { return new Customer(x) }) }).catch(error => { return error; }); } 谢谢！
这看起来很棒。我是打字稿的新手，您能否展示一个在项目返回为空的情况下使用默认值的示例？

【解决方案2】：

这本质上只是确定要做什么以创建类的实例，并将 JSON 响应的属性映射到您的自定义类，并且可能有许多不同的方法来解决这个问题，

但我认为 (Factory function) 是适合此类任务的方法。

【讨论】：