【问题标题】:Why isn't the response to my http.get typed?为什么没有输入对我的 http.get 的响应?
【发布时间】:2021-01-12 01:30:28
【问题描述】:

这是我认为非常熟悉的 angular & typescript 模式:

import { Component } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';



@Component({
    selector: 'some-selector'
})
class someComponent{

    someObject: someClass;
    someSum: number;
    someError: string;
    
    constructor(private _someService: SomeService) 
    {}
    
    getSomeObject(): void {
        this._someService.getSomeObject().subscribe<someClass>({
            next: results => {
                this.someObject = results;
                this.someSum = this.someObject.sum();
            },
            error: err => this.someError = err,
            complete: () => {}
        )
    }
}



class SomeService {
    constructor(private _http: HttpClient) 
    {}

    getSomeObject(): Observable<someClass> {
        return this._http.get<someClass>("");
    }
}



class someClass {
    prop_1:number;
    prop_2:number;
    sum():number{
        return this.prop_1 + this.prop_2
    }
}

我故意省略了错误捕获和其他内容,因为我想保持简单(并且真的希望以尽可能少的解释得到答案)。在我看来,这段代码拥有将 http.get 的结果转换为指定类所需的一切,但是如果我使用 Chrome 的 F12 检查器调试这个组件,我会收到如下错误:

core.js:4081 ERROR TypeError: _this.someObject.someSum 不是函数

...当它到达“this.someSum = someObject.sum();”部分时

那么我还需要做什么才能正确反序列化 http.get 的结果,使其表现得像键入的对象一样?

【问题讨论】:

  • 你试过(results:someClass) =&gt; {...} 吗?不确定这是否是最好的方法,但可行。
  • SomeClass 或 someInterface.. 确实如此。你就是这样做的。
  • 尝试将表达式右侧更改为this.someObject.sum()
  • 谢谢@Kaustubh Badrike,我将更改示例以反映这一点。

标签: angular typescript typescript-generics


【解决方案1】:

显然,它不是自动的。阅读https://angular.io/guide/http的“请求输入的响应”部分

指定响应类型是对 TypeScript 的声明,它应该将您的响应视为给定类型。这是一个构建时检查,并不能保证服务器实际上会使用这种类型的对象进行响应。由服务器确保返回服务器 API 指定的类型。

...然后...

要指定响应对象类型,首先定义一个具有所需属性的接口。使用接口而不是类,因为响应是一个普通对象,无法自动转换为类的实例。

...最后,

当您将接口作为类型参数传递给 HttpClient.get() 方法时,您可以使用 RxJS 映射运算符根据 UI 的需要转换响应数据。然后,您可以将转换后的数据传递到异步管道。

所以看起来我需要手动显式地将传入的对象转换为我想要的接口或类(而 RxJS 映射是一种方法)。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-09-20
    • 2015-12-30
    • 2014-04-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多