Angular 6 HttpClient返回类的实例

标签 angular typescript angular-http angular-httpclient

在引入 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
        })
}

```

会返回真值。有谁知道在 http 客户端的幕后新建实例的简单方法?

最佳答案

TypeScript 使用 structural typing ,即 c 对象不必是 Cow class 的实例以符合 Cow 输入

TypeScript 类型仅在编译时存在,不会以任何方式影响 JS 输出(用于 Angular DI 的发射类型除外)。 as Cow 断言 res 符合 Cow 类型,而 instanceof Cow 期望 cCow 类的实例。由于 Cow 未实例化,因此 cow instanceof Cow 为 false。

一个类应该被设计成支持水合作用(可能通过构造函数参数)并被显式实例化:

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)中完成> 静态方法)。

关于Angular 6 HttpClient返回类的实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50452431/

相关文章:

javascript - Angular 7数组改变值

javascript - Angular - 指令的输入在按下按钮时不更新

angular - 为什么在此 ngrx 示例中需要 takeUntil?

javascript - 如果我们有更多记录而没有使用 angular8 中断,如何更改下拉值

typescript - 类型中缺少 Object.entries 属性 'length'

javascript - 如何从双向绑定(bind)表单输入控件访问先前的值?

angularjs - 一旦兑现 promise ,就更新 ng-include 模板内的变量

angularjs - AngularJS使用拦截器来处理$ http 404s- promise 未定义错误

javascript - 使用 $http 获取 JSON 数据

angular - 某些 Material 图标未在生产中显示