Typescript类的默认值，如何将JSON解析为此类

Question

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

当我调用返回表示对象的JSON字符串的API时，如果它们为空，则某些属性可能会被省略。然而，稍后，这个对象将用于动态构建表单（使用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;
        });
    }

但是这返回undefined。一定是我做错什么了...

- Mortana

---

你已经尝试过什么了？ - falinsky

Answer 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

- user1859022

---

谢谢！我不需要显式解析，因为它已经是一个有效的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; }); }谢谢！ - Mortana

这看起来很不错。我对TypeScript还很陌生，您能否展示一个使用默认值的示例，在该示例中，当项目返回为null时使用默认值？ - Jarrod McGuire

Answer 2

这基本上只是确定如何创建一个类的实例，并将JSON响应的属性映射到您的自定义类，而可能有许多不同的方法来解决这个问题，

但我认为( 工厂函数)是这种任务的适当方法。

- kairun