JSON 到 TypeScript 类实例？ [复制]

Question

我已经做了很多研究，但我对我的发现并不完全满意。只是为了确定这是我的问题： 将 JSON 反序列化为 TypeScript 运行时类实例的最强大、最优雅的自动化解决方案实际上是什么？

假设我上了这门课：

class Foo {
  name: string;
  GetName(): string { return this.name };
}

假设我得到了这个用于反序列化的 JSON 字符串：

{"name": "John Doe"}

获取名称设置为“John Doe”的 Foo 类实例和 GetName() 方法工作的最佳和最可维护的解决方案是什么？我问得非常具体，因为我知道反序列化为纯数据对象很容易。我想知道是否可以使用工作方法获取类实例，而无需进行任何手动解析或任何手动数据复制。如果无法实现完全自动化的解决方案，那么下一个最佳解决方案是什么？

Answer 1

这个问题比较宽泛，所以我将给出几个解决方案。

解决方案 1：辅助方法

这是一个使用帮助器方法的示例，您可以根据自己的需要进行更改：

class SerializationHelper {
    static toInstance<T>(obj: T, json: string) : T {
        var jsonObj = JSON.parse(json);

        if (typeof obj["fromJSON"] === "function") {
            obj["fromJSON"](jsonObj);
        }
        else {
            for (var propName in jsonObj) {
                obj[propName] = jsonObj[propName]
            }
        }

        return obj;
    }
}

然后使用它：

var json = '{"name": "John Doe"}',
    foo = SerializationHelper.toInstance(new Foo(), json);

foo.GetName() === "John Doe";

高级反序列化

这还可以通过将您自己的 fromJSON 方法添加到类中来实现一些自定义反序列化（这与 JSON.stringify 已经使用 toJSON 方法的方式很好，如下所示）：

interface IFooSerialized {
    nameSomethingElse: string;
}

class Foo {
  name: string;
  GetName(): string { return this.name }

  toJSON(): IFooSerialized {
      return {
          nameSomethingElse: this.name
      };
  }

  fromJSON(obj: IFooSerialized) {
        this.name = obj.nameSomethingElse;
  }
}

然后使用它：

var foo1 = new Foo();
foo1.name = "John Doe";

var json = JSON.stringify(foo1);

json === '{"nameSomethingElse":"John Doe"}';

var foo2 = SerializationHelper.toInstance(new Foo(), json);

foo2.GetName() === "John Doe";

解决方案 2：基类

另一种方法是创建自己的基类：

class Serializable {
    fillFromJSON(json: string) {
        var jsonObj = JSON.parse(json);
        for (var propName in jsonObj) {
            this[propName] = jsonObj[propName]
        }
    }
}

class Foo extends Serializable {
    name: string;
    GetName(): string { return this.name }
}

然后使用它：

var foo = new Foo();
foo.fillFromJSON(json);

使用基类实现自定义反序列化的方法太多了，所以我将根据您的需要来决定。

Answer 2

您现在可以使用Object.assign(target, ...sources)。按照您的示例，您可以像这样使用它：

class Foo {
  name: string;
  getName(): string { return this.name };
}

let fooJson: string = '{"name": "John Doe"}';
let foo: Foo = Object.assign(new Foo(), JSON.parse(fooJson));

console.log(foo.getName()); //returns John Doe

Object.assign 是ECMAScript 2015 的一部分，目前可在大多数现代浏览器中使用。

Answer 3

将 JSON 反序列化为 TypeScript 运行时类实例的最强大、最优雅的自动化解决方案实际上是什么？

使用property decorators 和ReflectDecorators 来记录可在反序列化过程中使用的运行时可访问的类型信息，提供了一种令人惊讶的干净且适应性广泛的方法，该方法也非常适合现有代码。它也是完全自动化的，也适用于嵌套对象。

这个想法的一个实现是TypedJSON，我正是为此任务创建的：

@JsonObject
class Foo {
    @JsonMember
    name: string;

    getName(): string { return this.name };
}

var foo = TypedJSON.parse('{"name": "John Doe"}', Foo);

foo instanceof Foo; // true
foo.getName(); // "John Doe"

Answer 4

为什么你不能做这样的事情？

class Foo {
  constructor(myObj){
     Object.assign(this, myObj);
  }
  get name() { return this._name; }
  set name(v) { this._name = v; }
}

let foo = new Foo({ name: "bat" });
foo.toJSON() //=> your json ...

Answer 5

我在处理 Typescript 类和 json 对象时发现的最佳解决方案：在您的 Typescript 类中添加一个以 json 数据作为参数的构造函数。在该构造函数中，您使用 jQuery 扩展您的 json 对象，如下所示：$.extend(this, jsonData)。 $.extend 允许在添加 json 对象的属性时保留 javascript 原型。

export class Foo
{
    Name: string;
    getName(): string { return this.Name };

    constructor( jsonFoo: any )
    {
        $.extend( this, jsonFoo);
    }
}

在您的 ajax 回调中，将您的 json 转换为您的 typescript 对象，如下所示：

onNewFoo( jsonFoos : any[] )
{
  let receviedFoos = $.map( jsonFoos, (json) => { return new Foo( json ); } );

  // then call a method:
  let firstFooName = receviedFoos[0].GetName();
}

如果您不添加构造函数，只需在您的 ajax 回调中调用：

let newFoo = new Foo();
$.extend( newFoo, jsonData);
let name = newFoo.GetName()

...但是如果您也想转换子 json 对象，构造函数将很有用。看我的详细回答here。