javascript - 如何从 Angular 应用程序中服务器返回的 JSON 实例化 TypeScript 域对象

Question

我不得不相信这是 Angular/Typescript/JavaScript 中普遍存在的普遍情况。我有一个包含一些字段和一些方法的简单类。

class Rectangle {
  width: number;
  height: number;

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

然后我有一个服务，使用以下方法从我的服务器检索这些东西:

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

当然，我的网络服务返回类似

{width: 10, height:15}

但是一旦我拿回东西，我就不能对其调用 area()，因为(我猜)我们有一个伪装成矩形的裸 JavaScript 关联数组。我想这在某种程度上是有道理的——这不是 Java，在 Java 中对象创建被构造函数锁定。但是，从 Web 服务返回的 JSON 中获取数据到具有可用方法的适当 Rectangle 中的公认方法是什么？

我是否必须手动构建一个构造函数来执行此操作？在这种情况下这显然不会很乏味，但在有多个嵌套对象的情况下，它似乎很快就会失控。

我见过一些“自己动手”的解决方案(有些非常好)，但这似乎是 Angular 中非常常见的场景，所以我觉得很奇怪，没有普遍接受的实践或库去做这个。我在这里做错了什么吗？

Answer 1

服务器只返回具有定义对象属性的形成的数据。它实际上并不创建对象的实例。

尝试这样的事情:

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

这应该创建对象，然后将任何检索到的属性复制到其中。

这是我在 TypeScript Playground (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);