如何使用 JSON 对象初始化 TypeScript 对象？

这些是一些快速的镜头，以展示几种不同的方式。它们绝不是“完整的”，作为免责声明，我认为这样做不是一个好主意。而且代码也不是很干净，因为我只是很快地把它一起输入了。

另请注意：当然，可反序列化的类需要具有默认构造函数，就像我知道任何类型的反序列化的所有其他语言一样。当然，如果您调用不带参数的非默认构造函数，Javascript 不会抱怨，但类最好为它做好准备（另外，它不会真的是“打字方式”）。

选项 #1：根本没有运行时信息

这种方法的问题主要是任何成员的名称都必须与其类匹配。这会自动将您限制为每个班级只有一个相同类型的成员，并打破了几条良好实践的规则。我强烈建议不要这样做，但只是在这里列出，因为它是我写这个答案时的第一个“草稿”（这也是为什么名字是“Foo”等）。

module Environment {
    export class Sub {
        id: number;
    }

    export class Foo {
        baz: number;
        Sub: Sub;
    }
}

function deserialize(json, environment, clazz) {
    var instance = new clazz();
    for(var prop in json) {
        if(!json.hasOwnProperty(prop)) {
            continue;
        }

        if(typeof json[prop] === 'object') {
            instance[prop] = deserialize(json[prop], environment, environment[prop]);
        } else {
            instance[prop] = json[prop];
        }
    }

    return instance;
}

var json = {
    baz: 42,
    Sub: {
        id: 1337
    }
};

var instance = deserialize(json, Environment, Environment.Foo);
console.log(instance);

选项 #2：名称属性

为了摆脱选项 #1 中的问题，我们需要一些关于 JSON 对象中的节点是什么类型的信息。问题在于，在 Typescript 中，这些东西是编译时构造，我们在运行时需要它们——但运行时对象在设置它们之前根本不知道它们的属性。

一种方法是让类知道他们的名字。不过，您在 JSON 中也需要此属性。实际上，您只需要在 json 中使用它：

module Environment {
    export class Member {
        private __name__ = "Member";
        id: number;
    }

    export class ExampleClass {
        private __name__ = "ExampleClass";

        mainId: number;
        firstMember: Member;
        secondMember: Member;
    }
}

function deserialize(json, environment) {
    var instance = new environment[json.__name__]();
    for(var prop in json) {
        if(!json.hasOwnProperty(prop)) {
            continue;
        }

        if(typeof json[prop] === 'object') {
            instance[prop] = deserialize(json[prop], environment);
        } else {
            instance[prop] = json[prop];
        }
    }

    return instance;
}

var json = {
    __name__: "ExampleClass",
    mainId: 42,
    firstMember: {
        __name__: "Member",
        id: 1337
    },
    secondMember: {
        __name__: "Member",
        id: -1
    }
};

var instance = deserialize(json, Environment);
console.log(instance);

选项 #3：明确说明成员类型

如上所述，类成员的类型信息在运行时不可用——除非我们使其可用。我们只需要对非原始成员执行此操作即可：

interface Deserializable {
    getTypes(): Object;
}

class Member implements Deserializable {
    id: number;

    getTypes() {
        // since the only member, id, is primitive, we don't need to
        // return anything here
        return {};
    }
}

class ExampleClass implements Deserializable {
    mainId: number;
    firstMember: Member;
    secondMember: Member;

    getTypes() {
        return {
            // this is the duplication so that we have
            // run-time type information :/
            firstMember: Member,
            secondMember: Member
        };
    }
}

function deserialize(json, clazz) {
    var instance = new clazz(),
        types = instance.getTypes();

    for(var prop in json) {
        if(!json.hasOwnProperty(prop)) {
            continue;
        }

        if(typeof json[prop] === 'object') {
            instance[prop] = deserialize(json[prop], types[prop]);
        } else {
            instance[prop] = json[prop];
        }
    }

    return instance;
}

var json = {
    mainId: 42,
    firstMember: {
        id: 1337
    },
    secondMember: {
        id: -1
    }
};

var instance = deserialize(json, ExampleClass);
console.log(instance);

选项#4：冗长但简洁的方式

2016 年 1 月 3 日更新： 正如@GameAlchemist 在评论中指出的那样（idea、implementation），从 Typescript 1.7 开始，下面描述的解决方案可以使用类以更好的方式编写/ 属性装饰器。

序列化始终是一个问题，在我看来，最好的方法不是最短的方法。在所有选项中，这是我更喜欢的，因为该类的作者可以完全控制反序列化对象的状态。如果我不得不猜测，我会说所有其他选项迟早会给您带来麻烦（除非 Javascript 提供了处理此问题的本地方法）。

真的，下面的例子并没有做到灵活性。它确实只是复制了类的结构。但是，您必须记住的区别在于，该类可以完全控制使用它想要控制整个类的状态的任何类型的 JSON（您可以计算事物等）。

interface Serializable<T> {
    deserialize(input: Object): T;
}

class Member implements Serializable<Member> {
    id: number;

    deserialize(input) {
        this.id = input.id;
        return this;
    }
}

class ExampleClass implements Serializable<ExampleClass> {
    mainId: number;
    firstMember: Member;
    secondMember: Member;

    deserialize(input) {
        this.mainId = input.mainId;

        this.firstMember = new Member().deserialize(input.firstMember);
        this.secondMember = new Member().deserialize(input.secondMember);

        return this;
    }
}

var json = {
    mainId: 42,
    firstMember: {
        id: 1337
    },
    secondMember: {
        id: -1
    }
};

var instance = new ExampleClass().deserialize(json);
console.log(instance);

---

你可以使用 Object.assign 我不知道这是什么时候添加的，我目前使用的是 Typescript 2.0.2，这似乎是 ES6 的功能。

client.fetch( '' ).then( response => {
        return response.json();
    } ).then( json => {
        let hal : HalJson = Object.assign( new HalJson(), json );
        log.debug( "json", hal );

这是HalJson

export class HalJson {
    _links: HalLinks;
}

export class HalLinks implements Links {
}

export interface Links {
    readonly [text: string]: Link;
}

export interface Link {
    readonly href: URL;
}

这是chrome所说的

HalJson {_links: Object}
_links
:
Object
public
:
Object
href
:
"http://localhost:9000/v0/public

所以你可以看到它不会递归地进行分配

---

TLDR：TypedJSON（工作概念证明）

这个问题复杂的根源在于我们需要在运行时使用仅在编译时才存在的类型信息来反序列化 JSON。这需要在运行时以某种方式提供类型信息。

幸运的是，可以使用 decorators 和 ReflectDecorators 以一种非常优雅和强大的方式解决这个问题：

在需要序列化的属性上使用属性装饰器来记录元数据信息并将该信息存储在某处，例如在类原型上将此元数据信息提供给递归初始化程序（反序列化程序）

记录类型信息

通过结合使用 ReflectDecorators 和属性装饰器，可以轻松记录有关属性的类型信息。这种方法的基本实现是：

function JsonMember(target: any, propertyKey: string) {
    var metadataFieldKey = "__propertyTypes__";

    // Get the already recorded type-information from target, or create
    // empty object if this is the first property.
    var propertyTypes = target[metadataFieldKey] || (target[metadataFieldKey] = {});

    // Get the constructor reference of the current property.
    // This is provided by TypeScript, built-in (make sure to enable emit
    // decorator metadata).
    propertyTypes[propertyKey] = Reflect.getMetadata("design:type", target, propertyKey);
}

对于任何给定的属性，上面的代码片段会将属性的构造函数的引用添加到类原型上隐藏的 __propertyTypes__ 属性。例如：

class Language {
    @JsonMember // String
    name: string;

    @JsonMember// Number
    level: number;
}

class Person {
    @JsonMember // String
    name: string;

    @JsonMember// Language
    language: Language;
}

就是这样，我们在运行时获得了所需的类型信息，现在可以对其进行处理。

处理类型信息

我们首先需要使用 JSON.parse 获得一个 Object 实例——之后，我们可以遍历 __propertyTypes__ 中的整体（上面收集）并相应地实例化所需的属性。必须指定根对象的类型，以便反序列化器有一个起点。

同样，这种方法的一个非常简单的实现是：

function deserialize<T>(jsonObject: any, Constructor: { new (): T }): T {
    if (!Constructor || !Constructor.prototype.__propertyTypes__ || !jsonObject || typeof jsonObject !== "object") {
        // No root-type with usable type-information is available.
        return jsonObject;
    }

    // Create an instance of root-type.
    var instance: any = new Constructor();

    // For each property marked with @JsonMember, do...
    Object.keys(Constructor.prototype.__propertyTypes__).forEach(propertyKey => {
        var PropertyType = Constructor.prototype.__propertyTypes__[propertyKey];

        // Deserialize recursively, treat property type as root-type.
        instance[propertyKey] = deserialize(jsonObject[propertyKey], PropertyType);
    });

    return instance;
}

var json = '{ "name": "John Doe", "language": { "name": "en", "level": 5 } }';
var person: Person = deserialize(JSON.parse(json), Person);

上述想法有一个很大的优势，即通过 expected 类型（对于复杂/对象值）进行反序列化，而不是 JSON 中存在的内容。如果需要 Person，则它是创建的 Person 实例。通过对原始类型和数组采取一些额外的安全措施，这种方法可以变得安全，可以抵御任何恶意 JSON。

边缘案例

但是，如果您现在对解决方案如此简单感到高兴，那么我有一些坏消息：需要处理大量的边缘情况。只有其中一些是：

数组和数组元素（尤其是嵌套数组）

多态性

抽象类和接口

...

如果您不想摆弄所有这些（我打赌您不想），我很乐意推荐使用这种方法的概念验证的工作实验版本，TypedJSON -我创建来解决这个确切的问题，这是我每天都面临的问题。

由于装饰器仍然被认为是实验性的，我不建议将它用于生产用途，但到目前为止它对我很有用。

---

我创建了一个生成 TypeScript 接口和运行时“类型映射”的工具，用于针对 JSON.parse 的结果执行运行时类型检查：ts.quicktype.io

例如，给定这个 JSON：

{
  "name": "David",
  "pets": [
    {
      "name": "Smoochie",
      "species": "rhino"
    }
  ]
}

quicktype 生成以下 TypeScript 接口和类型映射：

export interface Person {
    name: string;
    pets: Pet[];
}

export interface Pet {
    name:    string;
    species: string;
}

const typeMap: any = {
    Person: {
        name: "string",
        pets: array(object("Pet")),
    },
    Pet: {
        name: "string",
        species: "string",
    },
};

然后我们根据类型映射检查 JSON.parse 的结果：

export function fromJson(json: string): Person {
    return cast(JSON.parse(json), object("Person"));
}

我遗漏了一些代码，但您可以尝试 quicktype 了解详细信息。

---

我一直在使用这个人来完成这项工作：https://github.com/weichx/cerialize

它非常简单但功能强大。它支持：

整个对象树的序列化和反序列化。

同一对象的持久性和瞬态属性。

用于自定义（反）序列化逻辑的挂钩。

它可以（反）序列化为现有实例（非常适合 Angular）或生成新实例。

等等

例子：

class Tree {
  @deserialize public species : string; 
  @deserializeAs(Leaf) public leafs : Array<Leaf>;  //arrays do not need extra specifications, just a type.
  @deserializeAs(Bark, 'barkType') public bark : Bark;  //using custom type and custom key name
  @deserializeIndexable(Leaf) public leafMap : {[idx : string] : Leaf}; //use an object as a map
}

class Leaf {
  @deserialize public color : string;
  @deserialize public blooming : boolean;
  @deserializeAs(Date) public bloomedAt : Date;
}

class Bark {
  @deserialize roughness : number;
}

var json = {
  species: 'Oak',
  barkType: { roughness: 1 },
  leafs: [ {color: 'red', blooming: false, bloomedAt: 'Mon Dec 07 2015 11:48:20 GMT-0500 (EST)' } ],
  leafMap: { type1: { some leaf data }, type2: { some leaf data } }
}
var tree: Tree = Deserialize(json, Tree);

---

对于简单的对象，我喜欢这种方法：

class Person {
  constructor(
    public id: String, 
    public name: String, 
    public title: String) {};

  static deserialize(input:any): Person {
    return new Person(input.id, input.name, input.title);
  }
}

var person = Person.deserialize({id: 'P123', name: 'Bob', title: 'Mr'});

利用在构造函数中定义属性的能力使其简洁。

这为您提供了一个类型化的对象（与所有使用 Object.assign 或某些变体的答案相比，它们为您提供了一个对象）并且不需要外部库或装饰器。

---

这是我的方法（非常简单）：

const jsonObj: { [key: string]: any } = JSON.parse(jsonStr);

for (const key in jsonObj) {
  if (!jsonObj.hasOwnProperty(key)) {
    continue;
  }

  console.log(key); // Key
  console.log(jsonObj[key]); // Value
  // Your logic...
}

---

选项 #5：使用 Typescript 构造函数和 jQuery.extend

这似乎是最易于维护的方法：添加一个以 json 结构为参数的构造函数，并扩展 json 对象。这样您就可以将 json 结构解析为整个应用程序模型。

无需在构造函数中创建接口或列出属性。

export class Company
{
    Employees : Employee[];

    constructor( jsonData: any )
    {
        jQuery.extend( this, jsonData);

        // apply the same principle to linked objects:
        if ( jsonData.Employees )
            this.Employees = jQuery.map( jsonData.Employees , (emp) => {
                return new Employee ( emp );  });
    }

    calculateSalaries() : void { .... }
}

export class Employee
{
    name: string;
    salary: number;
    city: string;

    constructor( jsonData: any )
    {
        jQuery.extend( this, jsonData);

        // case where your object's property does not match the json's:
        this.city = jsonData.town;
    }
}

在您收到公司计算工资的 ajax 回调中：

onReceiveCompany( jsonCompany : any ) 
{
   let newCompany = new Company( jsonCompany );

   // call the methods on your newCompany object ...
   newCompany.calculateSalaries()
}

---

如果你想要类型安全并且不喜欢装饰器

abstract class IPerson{
  name?: string;
  age?: number;
}
class Person extends IPerson{
  constructor({name, age}: IPerson){
    super();
    this.name = name;
    this.age = age;
  }
}

const json = {name: "ali", age: 80};
const person = new Person(json);

---

我为此目的找到的最好的方法是 class-transformer

这就是你如何使用它：

一些类：

export class Foo {

    name: string;

    @Type(() => Bar)
    bar: Bar;

    public someFunction = (test: string): boolean => {
        ...
    }
}

// the docs say "import [this shim] in a global place, like app.ts" 
import 'reflect-metadata';

// import this function where you need to use it
import { plainToClass } from 'class-transformer';

export class SomeService {

  anyFunction() {
    u = plainToClass(Foo, JSONobj);
  }
}

如果您使用 @Type 装饰器，也会创建嵌套属性。

---

上面描述的第四个选项是一种简单而好的方法，在您必须处理类层次结构的情况下，它必须与第二个选项结合使用，例如成员列表，它是子类的任何出现Member 超类，例如 Director 扩展 Member 或 Student 扩展 Member。在这种情况下，您必须以 json 格式提供子类类型

---

JQuery .extend 为您执行此操作：

var mytsobject = new mytsobject();

var newObj = {a:1,b:2};

$.extend(mytsobject, newObj); //mytsobject will now contain a & b

---

我个人更喜欢@Ingo Bürk 的选项#3。我改进了他的代码以支持复杂数据数组和原始数据数组。

interface IDeserializable {
  getTypes(): Object;
}

class Utility {
  static deserializeJson<T>(jsonObj: object, classType: any): T {
    let instanceObj = new classType();
    let types: IDeserializable;
    if (instanceObj && instanceObj.getTypes) {
      types = instanceObj.getTypes();
    }

    for (var prop in jsonObj) {
      if (!(prop in instanceObj)) {
        continue;
      }

      let jsonProp = jsonObj[prop];
      if (this.isObject(jsonProp)) {
        instanceObj[prop] =
          types && types[prop]
            ? this.deserializeJson(jsonProp, types[prop])
            : jsonProp;
      } else if (this.isArray(jsonProp)) {
        instanceObj[prop] = [];
        for (let index = 0; index < jsonProp.length; index++) {
          const elem = jsonProp[index];
          if (this.isObject(elem) && types && types[prop]) {
            instanceObj[prop].push(this.deserializeJson(elem, types[prop]));
          } else {
            instanceObj[prop].push(elem);
          }
        }
      } else {
        instanceObj[prop] = jsonProp;
      }
    }

    return instanceObj;
  }

  //#region ### get types ###
  /**
   * check type of value be string
   * @param {*} value
   */
  static isString(value: any) {
    return typeof value === "string" || value instanceof String;
  }

  /**
   * check type of value be array
   * @param {*} value
   */
  static isNumber(value: any) {
    return typeof value === "number" && isFinite(value);
  }

  /**
   * check type of value be array
   * @param {*} value
   */
  static isArray(value: any) {
    return value && typeof value === "object" && value.constructor === Array;
  }

  /**
   * check type of value be object
   * @param {*} value
   */
  static isObject(value: any) {
    return value && typeof value === "object" && value.constructor === Object;
  }

  /**
   * check type of value be boolean
   * @param {*} value
   */
  static isBoolean(value: any) {
    return typeof value === "boolean";
  }
  //#endregion
}

// #region ### Models ###
class Hotel implements IDeserializable {
  id: number = 0;
  name: string = "";
  address: string = "";
  city: City = new City(); // complex data
  roomTypes: Array<RoomType> = []; // array of complex data
  facilities: Array<string> = []; // array of primitive data

  // getter example
  get nameAndAddress() {
    return `${this.name} ${this.address}`;
  }

  // function example
  checkRoom() {
    return true;
  }

  // this function will be use for getting run-time type information
  getTypes() {
    return {
      city: City,
      roomTypes: RoomType
    };
  }
}

class RoomType implements IDeserializable {
  id: number = 0;
  name: string = "";
  roomPrices: Array<RoomPrice> = [];

  // getter example
  get totalPrice() {
    return this.roomPrices.map(x => x.price).reduce((a, b) => a + b, 0);
  }

  getTypes() {
    return {
      roomPrices: RoomPrice
    };
  }
}

class RoomPrice {
  price: number = 0;
  date: string = "";
}

class City {
  id: number = 0;
  name: string = "";
}
// #endregion

// #region ### test code ###
var jsonObj = {
  id: 1,
  name: "hotel1",
  address: "address1",
  city: {
    id: 1,
    name: "city1"
  },
  roomTypes: [
    {
      id: 1,
      name: "single",
      roomPrices: [
        {
          price: 1000,
          date: "2020-02-20"
        },
        {
          price: 1500,
          date: "2020-02-21"
        }
      ]
    },
    {
      id: 2,
      name: "double",
      roomPrices: [
        {
          price: 2000,
          date: "2020-02-20"
        },
        {
          price: 2500,
          date: "2020-02-21"
        }
      ]
    }
  ],
  facilities: ["facility1", "facility2"]
};

var hotelInstance = Utility.deserializeJson<Hotel>(jsonObj, Hotel);

console.log(hotelInstance.city.name);
console.log(hotelInstance.nameAndAddress); // getter
console.log(hotelInstance.checkRoom()); // function
console.log(hotelInstance.roomTypes[0].totalPrice); // getter
// #endregion

---

也许不是实际的，但简单的解决方案：

interface Bar{
x:number;
y?:string; 
}

var baz:Bar = JSON.parse(jsonString);
alert(baz.y);

也为困难的依赖工作！！！

---

你可以像下面那样做

export interface Instance {
  id?:string;
  name?:string;
  type:string;
}

和

var instance: Instance = <Instance>({
      id: null,
      name: '',
      type: ''
    });

---

使用工厂的另一种选择

export class A {

    id: number;

    date: Date;

    bId: number;
    readonly b: B;
}

export class B {

    id: number;
}

export class AFactory {

    constructor(
        private readonly createB: BFactory
    ) { }

    create(data: any): A {

        const createB = this.createB.create;

        return Object.assign(new A(),
            data,
            {
                get b(): B {

                    return createB({ id: data.bId });
                },
                date: new Date(data.date)
            });
    }
}

export class BFactory {

    create(data: any): B {

        return Object.assign(new B(), data);
    }
}

https://github.com/MrAntix/ts-deserialize

像这样使用

import { A, B, AFactory, BFactory } from "./deserialize";

// create a factory, simplified by DI
const aFactory = new AFactory(new BFactory());

// get an anon js object like you'd get from the http call
const data = { bId: 1, date: '2017-1-1' };

// create a real model from the anon js object
const a = aFactory.create(data);

// confirm instances e.g. dates are Dates 
console.log('a.date is instanceof Date', a.date instanceof Date);
console.log('a.b is instanceof B', a.b instanceof B);

保持您的类简单的注入可用于工厂以实现灵活性

---

我的方法略有不同。我不会将属性复制到新实例中，我只是更改现有 POJO 的原型（在旧浏览器上可能无法正常工作）。每个类负责提供一个 SetPrototypes 方法来设置任何子对象的原型，而这些子对象又提供自己的 SetPrototypes 方法。

（我还使用 _Type 属性来获取未知对象的类名，但在这里可以忽略）

class ParentClass
{
    public ID?: Guid;
    public Child?: ChildClass;
    public ListOfChildren?: ChildClass[];

    /**
     * Set the prototypes of all objects in the graph.
     * Used for recursive prototype assignment on a graph via ObjectUtils.SetPrototypeOf.
     * @param pojo Plain object received from API/JSON to be given the class prototype.
     */
    private static SetPrototypes(pojo: ParentClass): void
    {
        ObjectUtils.SetPrototypeOf(pojo.Child, ChildClass);
        ObjectUtils.SetPrototypeOfAll(pojo.ListOfChildren, ChildClass);
    }
}

class ChildClass
{
    public ID?: Guid;
    public GrandChild?: GrandChildClass;

    /**
     * Set the prototypes of all objects in the graph.
     * Used for recursive prototype assignment on a graph via ObjectUtils.SetPrototypeOf.
     * @param pojo Plain object received from API/JSON to be given the class prototype.
     */
    private static SetPrototypes(pojo: ChildClass): void
    {
        ObjectUtils.SetPrototypeOf(pojo.GrandChild, GrandChildClass);
    }
}

这是 ObjectUtils.ts：

/**
 * ClassType lets us specify arguments as class variables.
 * (where ClassType == window[ClassName])
 */
type ClassType = { new(...args: any[]): any; };

/**
 * The name of a class as opposed to the class itself.
 * (where ClassType == window[ClassName])
 */
type ClassName = string & {};

abstract class ObjectUtils
{
/**
 * Set the prototype of an object to the specified class.
 *
 * Does nothing if source or type are null.
 * Throws an exception if type is not a known class type.
 *
 * If type has the SetPrototypes method then that is called on the source
 * to perform recursive prototype assignment on an object graph.
 *
 * SetPrototypes is declared private on types because it should only be called
 * by this method. It does not (and must not) set the prototype of the object
 * itself - only the protoypes of child properties, otherwise it would cause a
 * loop. Thus a public method would be misleading and not useful on its own.
 * 
 * https://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript
 */
public static SetPrototypeOf(source: any, type: ClassType | ClassName): any
{
    let classType = (typeof type === "string") ? window[type] : type;

    if (!source || !classType)
    {
        return source;
    }

    // Guard/contract utility
    ExGuard.IsValid(classType.prototype, "type", <any>type);

    if ((<any>Object).setPrototypeOf)
    {
        (<any>Object).setPrototypeOf(source, classType.prototype);
    }
    else if (source.__proto__)
    {
        source.__proto__ = classType.prototype.__proto__;
    }

    if (typeof classType["SetPrototypes"] === "function")
    {
        classType["SetPrototypes"](source);
    }

    return source;
}

/**
 * Set the prototype of a list of objects to the specified class.
 * 
 * Throws an exception if type is not a known class type.
 */
public static SetPrototypeOfAll(source: any[], type: ClassType): void
{
    if (!source)
    {
        return;
    }

    for (var i = 0; i < source.length; i++)
    {
        this.SetPrototypeOf(source[i], type);
    }
}
}

用法：

let pojo = SomePlainOldJavascriptObjectReceivedViaAjax;

let parentObject = ObjectUtils.SetPrototypeOf(pojo, ParentClass);

// parentObject is now a proper ParentClass instance

---

**model.ts**
export class Item {
    private key: JSON;
    constructor(jsonItem: any) {
        this.key = jsonItem;
    }
}

**service.ts**
import { Item } from '../model/items';

export class ItemService {
    items: Item;
    constructor() {
        this.items = new Item({
            'logo': 'Logo',
            'home': 'Home',
            'about': 'About',
            'contact': 'Contact',
        });
    }
    getItems(): Item {
        return this.items;
    }
}

---