Jak dodać obiekt JSON do klasy maszynopisu?

Miałem ten sam problem i znalazłem bibliotekę, która robi to zadanie: https://github.com/pleerock/class-transformer .

To działa tak:

let jsonObject = response.json() as Object;
let fooInstance = plainToClass(Models.Foo, jsonObject);
return fooInstance;

Obsługuje zagnieżdżone dzieci, ale musisz udekorować członka swojej klasy.

W TypeScript możesz wykonać Typ assertion używając interfejsu i generyków w ten sposób:

var json = Utilities.JSONLoader.loadFromFile("../docs/location_map.json");
var locations: Array<ILocationMap> = JSON.parse(json).location;

Gdzie ILocationMap opisuje kształt Twoich danych. Zaletą tej metody jest to, że Twój JSON może zawierać więcej właściwości, ale kształt spełnia warunki interfejsu.

Nie dodaje to jednak metod instancji klasy.

Jeśli używasz ES6, spróbuj tego:

class Client{
  name: string

  displayName(){
    console.log(this.name)
  }
}

service.getClientFromAPI().then(clientData => {
  
  // Here the client data from API only have the "name" field
  // If we want to use the Client class methods on this data object we need to:
  let clientWithType = Object.assign(new Client(), clientData)

  clientWithType.displayName()
})

Ale ta metoda nie będzie działać na zagnieżdżonych obiektach, niestety.

Znalazłem bardzo ciekawy artykuł na temat generycznego odlewania JSON do klasy maszynopisu:

Http://cloudmark.github.io/Json-Mapping/

Kończy się następującym kodem:

let example = {
                "name": "Mark", 
                "surname": "Galea", 
                "age": 30, 
                "address": {
                  "first-line": "Some where", 
                  "second-line": "Over Here",
                  "city": "In This City"
                }
              };

MapUtils.deserialize(Person, example);  // custom class

TLDR: One liner

// This assumes your constructor method will assign properties from the arg.
.map((instanceData: MyClass) => new MyClass(instanceData));

Szczegółowa Odpowiedź

I would Nie Poleć obiekt.Przypisz podejście, ponieważ może niewłaściwie zaśmiecać instancję klasy nieistotnymi właściwościami (jak również zdefiniowanymi zamknięciami), które nie zostały zadeklarowane w samej klasie.

W klasie, do której próbujesz deserializować, upewniłbym się, że wszystkie właściwości, które chcesz deserializować, są zdefiniowane (null, pusta tablica, itd.). Poprzez zdefiniowanie swojego właściwości z wartościami początkowymi są widoczne podczas próby iteracji członków klasy w celu przypisania wartości (zobacz metodę deserializacji poniżej).

export class Person {
  public name: string = null;
  public favoriteSites: string[] = [];

  private age: number = null;
  private id: number = null;
  private active: boolean;

  constructor(instanceData?: Person) {
    if (instanceData) {
      this.deserialize(instanceData);
    }
  }

  private deserialize(instanceData: Person) {
    // Note this.active will not be listed in keys since it's declared, but not defined
    const keys = Object.keys(this);

    for (const key of keys) {
      if (instanceData.hasOwnProperty(key)) {
        this[key] = instanceData[key];
      }
    }
  }
}

W powyższym przykładzie po prostu stworzyłem metodę deserializacji. W prawdziwym świecie przykład, chciałbym go scentralizowane w klasie podstawowej wielokrotnego użytku lub metody usługi.

Oto jak wykorzystać to w czymś takim jak HTTP resp...

this.http.get(ENDPOINT_URL)
  .map(res => res.json())
  .map((resp: Person) => new Person(resp) ) );

Jeśli tslint / ide narzeka, że argument type jest niezgodny, po prostu argument do tego samego typu za pomocą nawiasów kątowych <YourClassName>, przykład:

const person = new Person(<Person> { name: 'John', age: 35, id: 1 });

Jeśli masz członków klasy, które są określonego typu (aka: instancja innej klasy), możesz je umieścić w typowanych instancjach za pomocą metod getter/setter.

export class Person {
  private _acct: UserAcct = null;
  private _tasks: Task[] = [];

  // ctor & deserialize methods...

  public get acct(): UserAcct {
    return this.acct;
  }
  public set acct(acctData: UserAcct) {
    this._acct = new UserAcct(acctData);
  }

  public get tasks(): Task[] {
    return this._tasks;
  }

  public set tasks(taskData: Task[]) {
    this._tasks = taskData.map(task => new Task(task));
  }
}

Powyższy przykład deserializuje zarówno acct, jak i listę zadań do odpowiednich instancji klasy.

Nie ma jeszcze możliwości automatycznego sprawdzenia, czy obiekt JSON otrzymany z serwera ma oczekiwane (odczytywane jest zgodne z) właściwościami interfejsu typescript. Ale możesz użyć strażników typu zdefiniowanych przez Użytkownika

Biorąc pod uwagę następujący interfejs i głupi obiekt json (mógł to być dowolny typ):

interface MyInterface {
    key: string;
 }

const json: object = { "key": "value" }

Trzy możliwe sposoby:

A. twierdzenie typu lub prosty rzut statyczny umieszczony za zmienną

const myObject: MyInterface = json as MyInterface;

B. prosty odlew statyczny, przed zmienną i między diamentami

const myObject: MyInterface = <MyInterface>json;

C. zaawansowana dynamiczna Obsada, sprawdzasz sam strukturę obiektu

function isMyInterface(json: any): json is MyInterface {
    // silly condition to consider json as conform for MyInterface
    return typeof json.key === "string";
}

if (isMyInterface(json)) {
    console.log(json.key)
}
else {
        throw new Error(`Expected MyInterface, got '${json}'.`);
}

Możesz pobawić się tym przykładem tutaj

Zwróć uwagę, że trudność polega na napisaniu funkcji isMyInterface. Mam nadzieję, że TS prędzej czy później doda dekorator do export Complex typing do runtime i pozwoli runtime sprawdzić strukturę obiektu w razie potrzeby. Na razie możesz użyć walidatora schematu json, którego celem jest w przybliżeniu taki sam lub ten Generator funkcji sprawdzania typu runtime

Zakładając, że json ma takie same właściwości jak Klasa typescript, nie musisz kopiować swoich właściwości Json do obiektu typescript. Będziesz musiał tylko skonstruować swój obiekt maszynopisu przekazując dane json w konstruktorze.

W Twoim wywołaniu zwrotnym ajax, otrzymujesz firmę:

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

   // call the methods on your newCompany object ...
}

Aby to zadziałało:

1) Dodaj konstruktor w klasie Typescript, który przyjmuje dane json jako parametr. W tym konstruktorze rozszerzasz swój obiekt json z jQuery, jak to: $.extend( this, jsonData). $.extend pozwala zachować prototypy javascript podczas dodawania właściwości obiektu json.

2) uwaga musisz zrobić to samo dla połączonych obiektów. W przypadku pracowników w przykładzie tworzysz również konstruktor, który pobiera część danych json dla pracowników. Zadzwoń do $.mapowanie w celu przetłumaczenia pracowników json na obiekty pracowników maszynopisu.

export class Company
{
    Employees : Employee[];

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

        if ( jsonData.Employees )
            this.Employees = $.map( jsonData.Employees , (emp) => {
                return new Employee ( emp );  });
    }
}

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

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

Jest to najlepsze rozwiązanie, jakie znalazłem, gdy miałem do czynienia z klasami Typescript i json obiektów.

W moim przypadku to działa. Użyłem funkcji obiekt.assign (target, sources ...). Najpierw utworzenie właściwego obiektu, a następnie skopiowanie danych z obiektu json do celu.Przykład:

let u:User = new User();
Object.assign(u , jsonUsers);

I bardziej zaawansowany przykład użycia. Przykład użycia tablicy.

this.someService.getUsers().then((users: User[]) => {
  this.users = [];
  for (let i in users) {
    let u:User = new User();
    Object.assign(u , users[i]);
    this.users[i] = u;
    console.log("user:" + this.users[i].id);
    console.log("user id from function(test it work) :" + this.users[i].getId());
  }

});

export class User {
  id:number;
  name:string;
  fullname:string;
  email:string;

  public getId(){
    return this.id;
  }
}

Choć nie jest to casting per se; znalazłem https://github.com/JohnWhiteTB/TypedJSON być użyteczną alternatywą.

@JsonObject
class Person {
    @JsonMember
    firstName: string;

    @JsonMember
    lastName: string;

    public getFullname() {
        return this.firstName + " " + this.lastName;
    }
}
var person = TypedJSON.parse('{ "firstName": "John", "lastName": "Doe" }', Person);

person instanceof Person; // true
person.getFullname(); // "John Doe"

Użyj deklaracji "as":

const data = JSON.parse(response.data) as MyClass;

Możesz utworzyć interface swojego typu (SomeType) i umieścić w nim obiekt.

const typedObject: SomeType = <SomeType> responseObject;

Jeśli chcesz oddać swój obiekt json do klasy typescript i mieć dostępne metody jego instancji w wynikowym obiekcie, musisz użyć Object.setPrototypeOf, tak jak zrobiłem w poniższym fragmencie kodu:

Object.setPrototypeOf(jsonObject, YourTypescriptClass.prototype)

Użyj klasy rozszerzonej z interfejsu.

Wtedy:

    Object.assign(
        new ToWhat(),
        what
    )

I najlepsze:

    Object.assign(
        new ToWhat(),
        <IDataInterface>what
    )

ToWhat staje się kontrolerem DataInterface

Stare pytanie z najczęściej poprawnymi, ale niezbyt skutecznymi odpowiedziami. To co proponuję:

Utwórz klasę bazową zawierającą metodę INIT () oraz statyczne metody cast (dla pojedynczego obiektu i tablicy). Statyczne metody mogą być wszędzie; wersja z klasą bazową i init () umożliwia łatwe rozszerzenia później.

export class ContentItem {
    // parameters: doc - plain JS object, proto - class we want to cast to (subclass of ContentItem)
    static castAs<T extends ContentItem>(doc: T, proto: typeof ContentItem): T {
        // if we already have the correct class skip the cast
        if (doc instanceof proto) { return doc; }
        // create a new object (create), and copy over all properties (assign)
        const d: T = Object.create(proto.prototype);
        Object.assign(d, doc);
        // reason to extend the base class - we want to be able to call init() after cast
        d.init(); 
        return d;
    }
    // another method casts an array
    static castAllAs<T extends ContentItem>(docs: T[], proto: typeof ContentItem): T[] {
        return docs.map(d => ContentItem.castAs(d, proto));
    }
    init() { }
}

Podobna mechanika (z assign () ) została wspomniana w poście @ Adam111p. Kolejny (pełniejszy) sposób na to. @Timothy Perez jest krytyczny wobec assign () , ale imho jest tu w pełni odpowiedni.

Zaimplementuj pochodną (rzeczywistą) klasę:

import { ContentItem } from './content-item';

export class SubjectArea extends ContentItem {
    id: number;
    title: string;
    areas: SubjectArea[]; // contains embedded objects
    depth: number;

    // method will be unavailable unless we use cast
    lead(): string {
        return '. '.repeat(this.depth);
    }

    // in case we have embedded objects, call cast on them here
    init() {
        if (this.areas) {
            this.areas = ContentItem.castAllAs(this.areas, SubjectArea);
        }
    }
}

Teraz możemy oddać obiekt pobrany z serwisu:

const area = ContentItem.castAs<SubjectArea>(docFromREST, SubjectArea);

Wszystkie hierarchie obiektów SubjectArea będą miały poprawną klasę.

A use case / example; create a Angular service (abstract base class again):

export abstract class BaseService<T extends ContentItem> {
  BASE_URL = 'http://host:port/';
  protected abstract http: Http;
  abstract path: string;
  abstract subClass: typeof ContentItem;

  cast(source: T): T {
    return ContentItem.castAs(source, this.subClass);
  }
  castAll(source: T[]): T[] {
    return ContentItem.castAllAs(source, this.subClass);
  }

  constructor() { }

  get(): Promise<T[]> {
    const value = this.http.get(`${this.BASE_URL}${this.path}`)
      .toPromise()
      .then(response => {
        const items: T[] = this.castAll(response.json());
        return items;
      });
    return value;
  }
}

Użycie staje się bardzo proste; Utwórz usługę Area:

@Injectable()
export class SubjectAreaService extends BaseService<SubjectArea> {
  path = 'area';
  subClass = SubjectArea;

  constructor(protected http: Http) { super(); }
}

get () metoda usługi zwróci obietnicę tablicy już rzuconej jako SubjectArea obiekty (Cała hierarchia)

Teraz powiedzmy, że mamy inną klasę:

export class OtherItem extends ContentItem {...}

Tworzenie usługi, która pobiera dane i rzuca do właściwej klasy jest tak proste, jak:

@Injectable()
export class OtherItemService extends BaseService<OtherItem> {
  path = 'other';
  subClass = OtherItem;

  constructor(protected http: Http) { super(); }
}

Osobiście uważam to za przerażające, że typescript nie pozwala na określenie definicji punktu końcowego Typ odbieranego obiektu. Jak się okazuje, rzeczywiście tak jest, Zrobiłbym to, co zrobiłem z innymi językami, a mianowicie oddzieliłbym obiekt JSON od definicji klasy, i niech definicja klasy użyje obiektu JSON jako Jego jedynego elementu danych.

Gardzę kodem boilerplate, więc dla mnie zazwyczaj jest to kwestia dotarcia do pożądanego rezultatu z jak najmniejszą ilością kodu przy zachowaniu typu.

Rozważ następujące definicje struktury obiektów JSON - będą to te, które otrzymujesz w punkcie końcowym, są to tylko definicje struktury, bez metod.

interface IAddress {
    street: string;
    city: string;
    state: string;
    zip: string;
}

interface IPerson {
    name: string;
    address: IAddress;
}

Jeśli myślimy o powyższym w kategoriach obiektowych, powyższe interfejsy nie są klasami, ponieważ definiują tylko strukturę danych. Klasa w terminach OO definiuje dane i kod, który na nich działa.

Więc teraz definiujemy klasę, która określa Dane i kod, który na nich działa...

class Person {
    person: IPerson;

    constructor(person: IPerson) {
        this.person = person;
    }

    // accessors
    getName(): string {
        return person.name;
    }

    getAddress(): IAddress {
        return person.address;
    }

    // You could write a generic getter for any value in person, 
    // no matter how deep, by accepting a variable number of string params

    // methods
    distanceFrom(address: IAddress): float {
        // Calculate distance from the passed address to this persons IAddress
        return 0.0;
    }
}

I teraz możemy po prostu przejść w dowolnym obiekcie zgodnym ze strukturą Ipersona i być w drodze...

   Person person = new Person({
            name: "persons name",
            address: {
                street: "A street address",
                city: "a city",
                state: "a state",
                zip: "A zipcode"
            }
        });

W ten sam sposób możemy teraz przetwarzać obiekt otrzymany w punkcie końcowym z czymś w rodzaju...

Person person = new Person(req.body);    // As in an object received via a POST call

person.distanceFrom({ street: "Some street address", etc.});

Jest to znacznie bardziej wydajne i zużywa połowę pamięci kopiowania danych, jednocześnie znacznie zmniejszając ilość kodu kotła, który musisz napisać dla każdego typu encji. Polega po prostu na bezpieczeństwo typu zapewniane przez maszynopis.

Https://jvilk.com/MakeTypes/

Możesz użyć tej strony do wygenerowania proxy dla Ciebie. generuje klasę i może analizować i walidować Twój wejściowy obiekt JSON.

Możesz wrzucić json do właściwości w ten sposób

class Jobs {
  constructor(JSONdata) {
    this.HEAT = JSONdata.HEAT;    
    this.HEAT_EAF = JSONdata.HEAT_EAF;    
  }
  
}

 var job = new Jobs({HEAT:'123',HEAT_EAF:'456'});

Użyłem tej biblioteki tutaj: https://github.com/pleerock/class-transformer

<script lang="ts">
    import { plainToClass } from 'class-transformer';
</script>

Realizacja:

private async getClassTypeValue() {
  const value = await plainToClass(ProductNewsItem, JSON.parse(response.data));
}

Czasami trzeba będzie przeanalizować wartości JSON dla plainToClass, aby zrozumieć, że są to dane sformatowane w JSON

W lates TS możesz zrobić tak:

const isMyInterface = (val: any): val is MyInterface => {
  if (!val) { return false; }
  if (!val.myProp) { return false; }
  return true;
};

A od usera TAK:

if (isMyInterface(data)) {
 // now data will be type of MyInterface
}

Miałem podobną potrzebę. Chciałem coś, co da mi łatwą transformację z / do JSON to pochodzi z wywołania REST api do / z określonej definicji klasy. Rozwiązania, które znalazłem były niewystarczające lub przeznaczone do przepisania mojego kod klas i dodawanie adnotacji lub podobieństw.

Chciałem coś takiego jak GSON jest używany w Javie do serializacji / deserializacji klas do / z obiektów JSON.

W połączeniu z późniejszą potrzebą, że konwerter będzie działał również w JS, I skończyłem pisanie własnej paczki.

Inicjalizujesz moduł za pomocą:

1. schemat konwersji-pozwalający na mapowanie między polami i wyznaczanie jak zostanie przeprowadzona konwersja
2. tablica map klas
3. Mapa funkcji konwersji-dla specjalnych konwersji.

Następnie w kodzie używasz inicjalizowanego modułu w stylu:

const convertedNewClassesArray : MyClass[] = this.converter.convert<MyClass>(jsonObjArray, 'MyClass');

const convertedNewClass : MyClass = this.converter.convertOneObject<MyClass>(jsonObj, 'MyClass');

Lub , do JSON:

const jsonObject = this.converter.convertToJson(myClassInstance);

Użyj tego linku do pakietu npm, a także szczegółowego wyjaśnienia jak pracować z modułem: JSON-class-converter

Również zapakowane na
Kątowe zastosowanie w : angular-JSON-class-converter

Przekazać obiekt tak jak jest konstruktorowi klasy; bez konwencji ani sprawdzeń

interface iPerson {
   name: string;
   age: number;
}

class Person {
   constructor(private person: iPerson) { }

   toString(): string {
      return this.person.name + ' is ' + this.person.age;
   }  
}


// runs this as // 
const object1 = { name: 'Watson1', age: 64 };
const object2 = { name: 'Watson2' };            // age is missing

const person1 = new Person(object1);
const person2 = new Person(object2 as iPerson); // now matches constructor

console.log(person1.toString())  // Watson1 is 64
console.log(person2.toString())  // Watson2 is undefined

Możesz użyć tego pakietu npm. https://www.npmjs.com/package/class-converter

Jest łatwy w użyciu, na przykład:

class UserModel {
  @property('i')
  id: number;

  @property('n')
  name: string;
}

const userRaw = {
  i: 1234,
  n: 'name',
};

// use toClass to convert plain object to class
const userModel = toClass(userRaw, UserModel);
// you will get a class, just like below one
// const userModel = {
//   id: 1234,
//   name: 'name',
// }

Jest to prosta i naprawdę dobra opcja

let person = "{"name":"Sam","Age":"30"}";

const jsonParse: ((key: string, value: any) => any) | undefined = undefined;
let objectConverted = JSON.parse(textValue, jsonParse);

I wtedy będziesz miał

objectConverted.name