Angular 6 HttpClient返回类的实例答案

【问题标题】：Angular 6 HttpClient return instance of classAngular 6 HttpClient返回类的实例
【发布时间】：2018-10-31 07:43:26
【问题描述】：

在引入 Angular 的新 HttpClient 之前，我们从 http api 调用返回的对象可以使用 instanceof 关键字进行验证。他们不再可以使用 HttpClient 模块。我正在尝试一些简单的方法，但类型检查每次都返回 false。期望的行为：

```

getCow() {
    return this.http.get<Cow>(ApiRoute.GET_COW, options)
        .map(res => res as Cow)
        .toPromise()
        .then((c: Cow) => {
            console.log(c instanceof Cow); //this is false
        })
}

```

将返回 true。有谁知道在 http 客户端幕后新建一个实例的简单方法？

【问题讨论】：

牛到底是什么？您需要使用new 构造它并使用cow 道具进行初始化。这不是 Angular 或 TS 可以为您处理的。
以上只是一个虚构的例子。为了这个问题，Cow 是一个没有属性和默认构造函数的类。
那么res 包含什么？这是否意味着它可以被丢弃？
您之前是如何创建 Cow 类的实例的？你应该能够以同样的方式做到这一点。
我不认为 StackOverflow 上的任何解决方案都是该问题的全面解决方案。所以，我为此创建了一个 npm 包 angular-http-deserializer：npmjs.com/package/angular-http-deserializer#usage

标签： angular typescript angular-http angular-httpclient

【解决方案1】：

TypeScript 使用structural typing，即c 对象不必是Cow 的实例class 以符合Cowtype。

TypeScript 类型仅在编译时存在，不会以任何方式影响 JS 输出（用于 Angular DI 的发出类型除外）。 as Cow 断言 res 符合 Cow 类型，而 instanceof Cow 期望 c 是 Cow 类的实例。由于Cow 没有被实例化，cow instanceof Cow 是假的。

一个类应该被设计成支持水合（可能通过构造函数参数）并被显式实例化：

class Cow {
  sound: string;
}

return this.http.get<Cow>(ApiRoute.GET_COW, options)
    .map(res => Object.assign(new Cow(), res as Cow))
    .toPromise()
    .then((c: Cow) => {
        console.log(c instanceof Cow);
    })

如果需要一些逻辑来从普通对象构造 Cow 实例（验证、嵌套对象构造），这可以在类构造函数或单独的辅助函数中完成（例如 Cow 静态方法）。

【讨论】：