时间戳

首页 > 解决方案 > Angular 12 HttpClient POST 到字符串无法编译

angular - Angular 12 HttpClient POST 到字符串无法编译

问题描述

我有一个POST返回纯字符串的方法。

以下不编译

public ping(): Observable<string> {
    return this.httpClient.post<string>(this.uri, {}, {
      observe: 'body', responseType: 'text'
    });
  }

错误是

TS2322: Type 'Observable<ArrayBuffer>' is not assignable to type 'Observable<string>'.     Type 'ArrayBuffer' is not assignable to type 'string'

看起来Webstorm坚持将我的声明编译成以下公共方法HttpClient（ctrl-clicked on it）

post(url: string, body: any | null, options: {
    headers?: HttpHeaders | {
        [header: string]: string | string[];
    };
    context?: HttpContext;
    observe?: 'body';
    params?: HttpParams | {
        [param: string]: string | number | boolean | ReadonlyArray<string | number | boolean>;
    };
    reportProgress?: boolean;
    responseType: 'arraybuffer';
    withCredentials?: boolean;
}): Observable<ArrayBuffer>;

我如何正确地告诉 Angular 服务器正在返回一个 plain string？

标签： angular

解决方案

这是令人困惑的泛型类型，以下工作正常：

return this.httpClient.post(this.uri, {}, {
  observe: 'body', responseType: 'text'
});

如果您查看实现，您只能看到三个带有泛型类型参数的重载post<T>，所有这些都期望responseType: 'json'。鉴于编译器无法匹配任何重载，它会向您显示应用为该方法列出的第一个错误，该方法确实返回Observable<ArrayBuffer>.

请注意，对于您实际想要的重载，observe参数是可选的，因此您可以这样做：

return this.httpClient.post(this.uri, {}, { responseType: 'text' });

此外，当我实际尝试使用损坏的服务进行构建时，我得到了一个比我在 IDE 中内联时更有用的错误；它实际上告诉我没有应用任何重载：

ERROR in src/app/service.ts:11:45 - error TS2769: No overload matches this call.
  Overload 1 of 15, '(url: string, body: any, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: "events"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<...>', gave the following error.
    Type '"text"' is not assignable to type '"json"'.
  Overload 2 of 15, '(url: string, body: any, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: "response"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<...>', gave the following error.
    Type '"text"' is not assignable to type '"json"'.
  Overload 3 of 15, '(url: string, body: any, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<...>', gave the following error.
    Type '"text"' is not assignable to type '"json"'.

11     return this.http.post<string>("", {}, { responseType: "text" });
                                               ~~~~~~~~~~~~

  node_modules/@angular/common/http/http.d.ts:2297:9
    2297         responseType?: 'json';
                 ~~~~~~~~~~~~
    The expected type comes from property 'responseType' which is declared here on type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: "events"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }'
  node_modules/@angular/common/http/http.d.ts:93m2413:9
    2413         responseType?: 'json';
                 ~~~~~~~~~~~~
    The expected type comes from property 'responseType' which is declared here on type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: "response"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }'
  node_modules/@angular/common/http/http.d.ts:2458:9
    2458         responseType?: 'json';
                 ~~~~~~~~~~~~
    The expected type comes from property 'responseType' which is declared here on type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }'

推荐阅读