Eu recebo um objeto JSON de uma chamada AJAX para um servidor REST. Este objeto possui nomes de propriedades que correspondem à minha classe TypeScript (este é o seguimento desta pergunta ).

Qual é a melhor maneira de inicializá-lo? Eu não acho que isso funcionará porque a classe (objeto & JSON) possui membros que são listas de objetos e membros que são classes, e essas classes têm membros que são listas e / ou classes.

Mas eu prefiro uma abordagem que procure os nomes dos membros e os atribua, criando listas e instanciando classes conforme necessário, para que eu não precise escrever código explícito para cada membro de cada classe (há MUITO!)

Estas são algumas fotos rápidas para mostrar algumas maneiras diferentes. Eles não são de forma alguma "completos" e, como um aviso, não acho que seja uma boa ideia fazê-lo dessa maneira. Além disso, o código não está muito limpo, pois eu o digitei rapidamente.

Também como observação: é claro que as classes desserializáveis ​​precisam ter construtores padrão, como é o caso em todos os outros idiomas em que tenho conhecimento de qualquer tipo de desserialização. Obviamente, o Javascript não reclamará se você chamar um construtor não padrão sem argumentos, mas é melhor que a classe esteja preparada para isso (além disso, não seria realmente a "maneira de escrever um texto").

Opção 1: nenhuma informação de tempo de execução

O problema com essa abordagem é principalmente que o nome de qualquer membro deve corresponder à sua classe. O que limita automaticamente a um membro do mesmo tipo por classe e quebra várias regras de boas práticas. Eu recomendo fortemente contra isso, mas apenas liste aqui porque foi o primeiro "rascunho" quando escrevi esta resposta (e é também por isso que os nomes são "Foo" etc.).

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);

Opção # 2: a propriedade name

Para se livrar do problema na opção 1, precisamos ter algum tipo de informação sobre o tipo de nó no objeto JSON. O problema é que, no Typescript, essas coisas são construções em tempo de compilação e precisamos delas em tempo de execução - mas os objetos de tempo de execução simplesmente não têm conhecimento de suas propriedades até serem definidas.

Uma maneira de fazer isso é conscientizando as classes de seus nomes. Você também precisa dessa propriedade no JSON. Na verdade, você só precisa dele no 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);

Opção nº 3: declarando explicitamente os tipos de membros

Como mencionado acima, as informações de tipo dos membros da classe não estão disponíveis no tempo de execução - ou seja, a menos que as disponibilizemos. Só precisamos fazer isso para membros não primitivos e estamos prontos para:

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);

Opção 4: A maneira detalhada, mas organizada

Atualização 01/03/2016: Como o @GameAlchemist apontou nos comentários ( idéia , implementação ), a partir do Typescript 1.7, a solução descrita abaixo pode ser escrita de uma maneira melhor usando decoradores de classe / propriedade.

A serialização é sempre um problema e, na minha opinião, a melhor maneira é apenas a mais curta. De todas as opções, é isso que eu prefiro, porque o autor da classe tem controle total sobre o estado dos objetos desserializados. Se eu tivesse que adivinhar, diria que todas as outras opções, mais cedo ou mais tarde, causarão problemas (a menos que o Javascript tenha uma maneira nativa de lidar com isso).

Realmente, o exemplo a seguir não faz justiça à flexibilidade. Realmente apenas copia a estrutura da classe. A diferença que você deve ter em mente aqui, porém, é que a classe tem controle total para usar qualquer tipo de JSON que deseja controlar o estado de toda a classe (você pode calcular as coisas etc.).

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);

você pode usar Object.assignNão sei quando isso foi adicionado. No momento, estou usando o Typescript 2.0.2 e esse parece ser um recurso do ES6.

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

aqui está HalJson

export class HalJson {
    _links: HalLinks;
}

export class HalLinks implements Links {
}

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

export interface Link {
    readonly href: URL;
}

aqui está o que o Chrome diz que é

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

para que você possa ver que não faz a atribuição recursivamente

TLDR: TypedJSON (prova de conceito de trabalho)

A raiz da complexidade desse problema é que precisamos desserializar o JSON em tempo de execução usando informações de tipo que só existem em tempo de compilação . Isso requer que as informações de tipo sejam disponibilizadas de alguma forma no tempo de execução.

Felizmente, isso pode ser resolvido de uma maneira muito elegante e robusta com decoradores e ReflectDecorators :

1. Use decoradores de propriedades em propriedades sujeitas a serialização, para registrar informações de metadados e armazenar essas informações em algum lugar, por exemplo, no protótipo de classe
2. Alimente essas informações de metadados a um inicializador recursivo (desserializador)

Informações sobre o tipo de gravação

Com uma combinação de ReflectDecorators e decoradores de propriedades, as informações de tipo podem ser facilmente registradas sobre uma propriedade. Uma implementação rudimentar dessa abordagem seria:

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);
}

Para qualquer propriedade, o trecho acima adicionará uma referência da função construtora da propriedade à __propertyTypes__propriedade oculta no protótipo de classe. Por exemplo:

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

    @JsonMember// Number
    level: number;
}

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

    @JsonMember// Language
    language: Language;
}

E é isso, temos as informações de tipo necessárias em tempo de execução, que agora podem ser processadas.

Informações de tipo de processamento

Primeiro precisamos obter uma Objectinstância usando JSON.parse- depois disso, podemos iterar sobre as entradas em __propertyTypes__(coletadas acima) e instanciar as propriedades necessárias de acordo. O tipo do objeto raiz deve ser especificado, para que o desserializador tenha um ponto de partida.

Novamente, uma implementação simples e simples dessa abordagem seria:

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);

A idéia acima tem uma grande vantagem de desserializar por tipos esperados (para valores complexos / de objetos), em vez do que está presente no JSON. Se a Personé esperado, é uma Personinstância criada. Com algumas medidas de segurança adicionais em vigor para tipos e matrizes primitivos, essa abordagem pode ser protegida, resistindo a qualquer JSON malicioso.

Casos Edge

No entanto, se você está feliz agora que a solução é que simples, eu tenho uma má notícia: há um grande número de casos de ponta que precisam ser tomadas de cuidados. Apenas alguns dos quais são:

• Matrizes e elementos da matriz (especialmente em matrizes aninhadas)
• Polimorfismo
• Classes abstratas e interfaces
• ...

Se você não quiser mexer com tudo isso (aposto que não), ficaria feliz em recomendar uma versão experimental de trabalho de uma prova de conceito utilizando essa abordagem, o TypedJSON - que eu criei para resolver esse problema exato, um problema que eu enfrento diariamente.

Devido à forma como os decoradores ainda estão sendo considerados experimentais, eu não recomendaria usá-lo para uso em produção, mas até agora isso me serviu bem.

Eu tenho usado esse cara para fazer o trabalho: https://github.com/weichx/cerialize

É muito simples, mas poderoso. Suporta:

• Serialização e desserialização de toda uma árvore de objetos.
• Propriedades persistentes e transitórias no mesmo objeto.
• Ganchos para personalizar a lógica de (des) serialização.
• Ele pode (des) serializar em uma instância existente (ótima para Angular) ou gerar novas instâncias.
• etc.

Exemplo:

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);

Eu criei uma ferramenta que gera interfaces TypeScript e um "mapa de tipos" em tempo de execução para executar a digitação em tempo de execução com os resultados de JSON.parse: ts.quicktype.io

Por exemplo, dado esse JSON:

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

quicktype produz a seguinte interface TypeScript e tipo de mapa:

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",
    },
};

Em seguida, verificamos o resultado de JSON.parsecontra o mapa de tipos:

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

Deixei de fora algum código, mas você pode tentar o quicktype para obter os detalhes.

Opção 5: Usando construtores TypeScript e jQuery.extend

Este parece ser o método mais sustentável: adicione um construtor que tome como parâmetro a estrutura json e estenda o objeto json. Dessa forma, você pode analisar uma estrutura json em todo o modelo de aplicativo.

Não há necessidade de criar interfaces ou listar propriedades no construtor.

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;
    }
}

No retorno de chamada ajax, você recebe uma empresa para calcular salários:

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

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

Para objetos simples, eu gosto deste método:

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'});

Aproveitar a capacidade de definir propriedades no construtor permite que seja conciso.

Isso gera um objeto digitado (em comparação com todas as respostas que usam Object.assign ou alguma variante, que fornece um objeto) e não requer bibliotecas ou decoradores externos.

A quarta opção descrita acima é uma maneira simples e agradável de fazer isso, que deve ser combinada com a segunda opção no caso em que você precisa lidar com uma hierarquia de classes como, por exemplo, uma lista de membros que é uma das ocorrências de subclasses de uma superclasse de membro, por exemplo, o diretor estende o membro ou o aluno estende o membro. Nesse caso, você deve fornecer o tipo de subclasse no formato json

O JQuery .extend faz isso para você:

var mytsobject = new mytsobject();

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

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

Talvez não seja uma solução real, mas simples:

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

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

trabalhar para dependências difíceis também !!!

Outra opção usando fábricas

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

use assim

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);

1. mantém suas aulas simples
2. injeção disponível nas fábricas para flexibilidade

o melhor que encontrei para esse fim é o transformador de classe. github.com/typestack/class-transformer

É assim que você o usa:

Alguma classe:

export class Foo {

    name: string;

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

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


import { plainToClass } from 'class-transformer';

export class SomeService {

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

Se você usar as propriedades aninhadas do decorador @Type, também serão criadas.

Pessoalmente, prefiro a opção nº 3 do @Ingo Bürk. E aprimorei seus códigos para suportar uma matriz de dados complexos e uma matriz de dados primitivos.

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

você pode fazer como abaixo

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

e

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

**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;
    }
}