Question

我在AngularJS，TypeScript和RxJs上挣扎。

我使用rxJs在组件arch中的Typescript中进行编码。 但是它仍然是AngularJs ;）

我已将具有id，brand和model字段的接口Car定义为与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<{}>行以使其与汽车类型兼容？

我尝试了数十种变体并收到错误

“不能将类型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是什么<<< / p>

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

地图返回我们返回值的Observable，因此它将与您的变量声明cars$: Observable<Car[]>;

相匹配

调用fromPromise()并传入get时，我可疑类型信息丢失。尝试提供来自Promise的类型信息

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

IHttpPromise <{}>，Observable <sometype []>如何使其在http调用中起作用？

1 个答案: