Comment instancier des objets de domaine TypeScript à partir de JSON renvoyés par le serveur dans une application Angular ?

Question

J'ai des problèmes avec ce que je dois croire être une situation assez commune dans Angular / Typescript / JavaScript en général. J'ai une classe simple avec quelques champs et quelques méthodes.

class Rectangle {
  width: number;
  height: number;

  area(): number {
    return this.width * this.height;
  }
}

J'ai ensuite un service avec la méthode suivante qui récupère ces éléments sur mon serveur :

class RectangleService {

...  // blah blah blah

  getRectangle (id: number): Observable<Rectangle> {
    // no error handling needed - nothing ever goes wrong with web services...  :) 
    return this.http.get<Rectangle> ('http://myserver.com:8080/rectangle/' + id);  
  }
}

Et bien sûr, mon service web renvoie quelque chose comme

{width: 10, height:15}

Mais une fois que j'ai récupéré l'objet, je ne peux pas appeler area() parce que (je suppose) nous avons un tableau associatif JavaScript nu qui se fait passer pour un Rectangle. Ce qui est logique jusqu'à un certain point, je suppose - ce n'est pas Java où la création d'objets est verrouillée par des constructeurs. Mais quelle est la manière acceptée d'obtenir ces données à partir de JSON retourné par le service web dans un Rectangle approprié qui a les méthodes disponibles ?

Est-ce que je dois construire manuellement un constructeur pour faire cela ? Cela ne serait évidemment pas fastidieux dans ce cas, mais dans le cas où il y a plusieurs objets imbriqués, il semble que cela pourrait rapidement devenir incontrôlable.

J'ai vu quelques solutions "roll-your-own" (et certaines sont très bonnes), mais cela semble être un scénario très courant dans Angular, et je trouve donc étrange qu'il n'y ait pas de pratique ou de bibliothèque communément acceptée pour faire cela. Est-ce que je fais quelque chose de mal ?

Answer 1

Le serveur renvoie simplement les données formé avec les propriétés de l'objet défini. Il ne crée pas d'instance de l'objet.

Essayez quelque chose comme ceci :

return this.http.get<Rectangle> ('http://myserver.com:8080/rectangle/' + id)
               .map(res => Object.assign(new Rectangle(), res));

Cela devrait créer l'objet et y copier toutes les propriétés récupérées.

Voici un exemple de code que j'ai utilisé sur le terrain de jeu TypeScript ( https://www.typescriptlang.org/play/ ):

class Hospital {
    hospital: string;
    doctors: Doctors[];
}
class Doctors {
    id: number;
    ward: string;
}

class Test {
    hospitals: Hospital[] = [];
    hospitals2: Hospital[];
    constructor() {
        this.hospitals[7] = {
            hospital: "New York Hospital",
            doctors: [{
                id: 1269,
                ward: "test"
            }]
        };
        this.hospitals2 = Object.assign(new Hospital(), this.hospitals);
    }

    data() {
        return JSON.stringify(this.hospitals) + '<br>' +
               JSON.stringify(this.hospitals2);
    }
}

let tester = new Test();

let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
    alert(tester.data());
}

document.body.appendChild(button);