javascript - 如何在 Typescript 中序列化/反序列化复杂对象，例如反序列化对象与序列化对象的类型相同

Question

我有一个复杂的对象，我想对其进行序列化和反序列化并获取相同类型的对象。

let workflow = new Workflow();
console.log(`workflow is instanceof Workflow: ${workflow instanceof Workflow}`);
console.log(workflow);

let json = JSON.stringify(workflow);
console.log(json);

let workflow2 = JSON.parse(json) as Workflow;
console.log(workflow2);
console.log(`workflow2 is instanceof Workflow: ${workflow2 instanceof Workflow}`);

let workflow3: Workflow = JSON.parse(json) as Workflow;
console.log(workflow3);
console.log(`workflow3 is instanceof Workflow: ${workflow3 instanceof Workflow}`);

控制台输出为:

是否有现成的解决方案，或者我需要手动重新实例化复杂对象并设置其所有属性？

Answer 1

您可以将对象的 fromJSON() 与 reviver 函数一起使用到 JSON.parse() 来实现您想要的效果。

例如:

type Serialized<T> = Pick<T, keyof T> & { _type: string };

class Workflow {
  foo: number;

  constructor(foo: number) {
    this.foo = foo;
  }

  public toJSON(): Serialized<Workflow> {
    return {
      _type: this.constructor.name,
      ...this
    };
  }

  public static fromJSON(source: Serialized<Workflow>): Workflow {
    return new Workflow(source.foo);
  }
}

function reviver(key: string, value: any): any {
  if (typeof value === "object" && value && "_type" in value) {
    switch (value._type) {
      case "Workflow": return Workflow.fromJSON(value);
    }
  }
  return value;
}

const w = new Workflow(42);
console.log(w instanceof Workflow);

const s = JSON.stringify(w);
console.log(s);

const w2 = JSON.parse(s, reviver) as Workflow;
console.log(w2.foo);
console.log(w2 instanceof Workflow);

打印:

true
{"_type":"Workflow","foo":42}
42
true

亲自尝试一下 playground !