IHttpPromise<{}>, Observable<SomeType[]> 如何让它在 http 调用中工作？

Question

我正在为 AngularJS、TypeScript 和 RxJs 苦苦挣扎。

我在 Typescript 中使用 rxJs 在组件拱门中编写代码。 但它仍然是 AngularJs ;)

我已经将接口 Car 定义为 id、brand 和 model 字段作为匹配 API 的字符串。

现在我正在对 rest API 进行 HTTP 调用，当我尝试使用该接口定义类型时，它给了我一个错误。 我不知道我做错了什么。 Angular 6 方式可能太多了。

我有一个变量

public cars$: Observable<Car[]>;

现在在构造函数中，我正在尝试从 API 获取汽车...

this.cars$ = fromPromise(this.$http.get('http://...someurl...')).pipe(map((data: IHttpResponse<{}>) => data));

我应该如何更改 data: IHttpResponse<{}> 行以使其适用于 Car 类型？

我尝试了几十种变体，但出现错误

“类型 Observable 不可分配给类型 Observable” “参数不可分配给参数” “源和源的类型不兼容”...

我做错了什么？

Answer 1

查看IHttpResponse的类型定义

interface IHttpResponse<T> {
    data: T;
    status: number;
    headers: IHttpHeadersGetter;
    config: IRequestConfig;
    statusText: string;
    /** Added in AngularJS 1.6.6 */
    xhrStatus: 'complete' | 'error' | 'timeout' | 'abort';
}

我们看到它将有一个类型为 T 的成员 data。我们可以通过将类型放在菱形中来告诉 typescript T 是什么

IHttpResponse<Car[]>

用我们的接口现在看起来像这样的类型替换泛型

interface IHttpResponse {
    data: Car[];
    status: number;
    headers: IHttpHeadersGetter;
    config: IRequestConfig;
    statusText: string;
    /** Added in AngularJS 1.6.6 */
    xhrStatus: 'complete' | 'error' | 'timeout' | 'abort';
}

所以我们希望我们的函数看起来像这样：

(response: IHttpResponse<Car[]>) =>{ 
    //looking at the above interface we see that response.data is now Car[];
    const carArray:Car[] = response.data 
    return carArray;
}

Map 返回一个我们返回的 Observable，所以它会匹配你的变量声明 cars$: Observable<Car[]>;

我怀疑在调用fromPromise() 并传入get 时类型信息丢失了。尝试提供 fromPromise 类型信息

fromPromise(this.$http.get<Car[]>('http://...someurl...'))