Angular: HttpResponseTypeを設定できません

回避策：

const options: {
            headers?: HttpHeaders,
            observe?: 'body',
            params?: HttpParams,
            reportProgress?: boolean,
            responseType: 'text',
            withCredentials?: boolean
        } = {
            headers: headers,
            params: params,
            responseType: 'text'
        };

@zaiddabaeen現在、これは仕様によるものです。 Typescriptは、 get()の正しい戻りタイプを選択するために、 observeとresponseTypeの値を静的に推測できる必要があります。 不適切に入力されたoptionsオブジェクトを渡すと、正しいリターンタイプを推測できません。

別の回避策は次のとおりです。

const options = {headers, params, responseType: 'text' as 'text'};
return this.http.get(url, options).share();

私は理解していますが、それは開発者にとって直感的でなく、混乱を招くものだと思います。 以前に文字列を「文字列」にキャストしたことはありません。 提案されているように型を列挙して使用することは、よりクリーンな解決策として私には聞こえます。

@zaiddabaeen問題は次のとおりです。

const res = this.http.get(url, options);

resの種類は何ですか？ optionsの値によって異なりますが、Typescriptには、インライン化されていない場合にそれらの値が何であるかを知る方法がありません。

言い換えると：

const res = this.http.get(url, {responseType: 'text'});

と同等ではありません

const options = {responseType: 'text'};
const res = this.http.get(url, options);

最初の1つでは、TypescriptはresのタイプがObservable<string>であると推測できますが、2つ目では、型推論では判別できません。 この機能を追加した場合、 Observable<any>を返す必要がありますが、これはエクスペリエンスが低下します。

これが望まれるほとんどの場合は、スプレッド演算子で解決できると思います。

// Some options we want to control dynamically.
const options = {headers: ..., params: ...};
const res = this.http.get(url, {...options, responseType: 'text'});

このようにして、Typescriptは署名とresponseTypeの値に基づいて戻り型を推測できますが、オブジェクト全体を再構築せずにオプションを渡すこともできます。

代わりに、目的の効果を得るために回避策を実行する必要がありますか？ それはこれについて行く方法ではありえません。 私はこれについてかなり長い間コンピュータで叫んでいます、私はHttpClientをラップするサービスを持っていますが、$＃ responseTypeを設定しようとしても機能しません、それが唯一の方法ですresponseType: 'text' as 'json'を実行することで、エラーを解消できます。上記の回避策はいずれも機能しません。

@chrillewoodzただし、デフォルトはJSONです。 なぜjsonにキャストするのですか？
私のアプローチは機能しており、現在本番環境で実行されていることを確認できます。

@zaiddabaeen私はjsonに何もキャストしていません（私が知る限り）。 これは私が持っているものです：

  public get<T>(url: string, params?: {[key: string]: any}, headers?: HttpHeaders): Observable<T> {
    return this.http.get<T>(this.config.host + url, this.getRequestOptions(params, headers));
  }

  private getRequestOptions(params?: any, customHeaders?: HttpHeaders) {

    let defaultHeaders: HttpHeaders = new HttpHeaders();

    defaultHeaders = defaultHeaders.set('Content-Type', 'application/json');

    return {
      headers: customHeaders || defaultHeaders,
      params: params ? this.convertJSONtoParams(params) : null
    };
  }

getRequestOptionsのreturnにresponseType: 'text'を追加しようとすると、エラーが発生します。

responseType: 'text' as 'text'を使用する

上記の回避策はいずれも機能しません。

私はすでに上記のすべてを試しました：|

私もこの問題を抱えていましたが、get呼び出しから<T>を削除することで、$＃ responseType: 'text'as 'text'を使用して動作させることができました。

たとえば、これは機能せず、エラーを返します。

const options: { responseType: 'text' as 'text', withCredentials: true };
this.httpClient.get<string>(url, options)

しかし、これは機能します：

const options: { responseType: 'text' as 'text', withCredentials: true };
this.httpClient.get(url, options)

エラーなしで動作させる唯一の方法は、 @ roddyの例を使用することでした。これは、インラインオプションを使用することです...

これは動作しません：

そしてどちらもしません：

Angular v4.4.3

typeof Tが自動的に推測されるため、responseTypeがjson以外に指定されている場合は、ジェネリックを使用しないでください。

get()メソッドでどのように定義されているかを見てみましょう

    /**
     * Construct a GET request which interprets the body as an `ArrayBuffer` and returns it.
     *
     * <strong i="10">@return</strong> an `Observable` of the body as an `ArrayBuffer`.
     */
    get(url: string, options: {
        headers?: HttpHeaders;
        observe?: 'body';
        params?: HttpParams;
        reportProgress?: boolean;
        responseType: 'arraybuffer';
        withCredentials?: boolean;
    }): Observable<ArrayBuffer>;
    /**
     * Construct a GET request which interprets the body as a `Blob` and returns it.
     *
     * <strong i="11">@return</strong> an `Observable` of the body as a `Blob`.
     */
    get(url: string, options: {
        headers?: HttpHeaders;
        observe?: 'body';
        params?: HttpParams;
        reportProgress?: boolean;
        responseType: 'blob';
        withCredentials?: boolean;
    }): Observable<Blob>;
    /**
     * Construct a GET request which interprets the body as text and returns it.
     *
     * <strong i="12">@return</strong> an `Observable` of the body as a `string`.
     */
    get(url: string, options: {
        headers?: HttpHeaders;
        observe?: 'body';
        params?: HttpParams;
        reportProgress?: boolean;
        responseType: 'text';
        withCredentials?: boolean;
    }): Observable<string>;
    /**
     * Construct a GET request which interprets the body as JSON and returns it.
     *
     * <strong i="13">@return</strong> an `Observable` of the body as an `Object`.
     */
    get(url: string, options?: {
        headers?: HttpHeaders;
        observe?: 'body';
        params?: HttpParams;
        reportProgress?: boolean;
        responseType?: 'json';
        withCredentials?: boolean;
    }): Observable<Object>;
    /**
     * Construct a GET request which interprets the body as JSON and returns it.
     *
     * <strong i="14">@return</strong> an `Observable` of the body as type `T`.
     */
    get<T>(url: string, options?: {
        headers?: HttpHeaders;
        observe?: 'body';
        params?: HttpParams;
        reportProgress?: boolean;
        responseType?: 'json';
        withCredentials?: boolean;
    }): Observable<T>;

responseTypeがjsonの場合、型は静的にわからないものにしかなり得ないため、これは完全に理にかなっています。他のすべての場合、ジェネリックは必要ありません。

@reppnersこんにちはステファン、上記の説明をありがとう。 ただし、どのように試しても、アプリで画像のURLをインターセプトするために使用しているサービスで新しいHttpClientを機能させることはできません。

get(url: string): Observable<any> {
    return new Observable((observer: Subscriber<any>) => {
        let objectUrl: string = null;
          this.http
            .get(url, {headers: this.getHeaders(), responseType: ResponseContentType.Blob} )
            .subscribe(m => {
              objectUrl = URL.createObjectURL(m.blob());
              observer.next(objectUrl);
            });

        return () => {
          if (objectUrl) {
            URL.revokeObjectURL(objectUrl);
            objectUrl = null;
          }
        }
    });
  }
  getHeaders(): Headers {
    let headers = new Headers();

    let token = this.authService.getToken();
    if (token) {
      headers.set('Authorization', 'Bearer ' + token);
    }

    return headers;
  }

responseType: 'blob'をGETリクエストに直接設定することも、上記のようにoptions: { }に設定することもできません。

@ a-kolybelnikovあなたの場合、次のようなものを使用できます。

.get(url, { headers: this.getHeaders(), responseType: ResponseContentType.Blob as 'blob' })

@btoryありがとうございます。 試しましたが、機能しません。

これを試してください：..、responseType： 'text' as'json '

@ rds-rafaelに感謝します、 this.http.get<ArrayBuffer>(this.pdfLink, {responseType: 'arraybuffer' as 'json'})は私のために働きました、少し奇妙です。

最後に、解決策は正しく型指定された引数を渡すことです。

ブロブの場合：
.get(url, { 'responseType: 'blob' as 'json' })

したがって、この方法でHttpをHttpClientにリファクタリングするという議論に勝った人は誰でも間違っています。

@chrillewoodzのソリューションは私のために働いた
私は次のようなものを持っていました
this.httpClient.post<string>(url, data, {responseType: 'text' as 'json'});
これは、私が呼び出されたAPIが単に文字列を返すために機能しました。 もちろん、ジェネリックを削除するということは、すべてを次のように変更する必要があることを意味します。
this.httpClient.post(url, data, {responseType: 'text' as 'text'});

これに対する回避策はほんのわずかな煩わしさであると私は思いますが、それは本当に厄介で、実際にこの答えを見つけるのは非常に困難でした。 これがより適切に文書化されているか、より直感的な解決策に到達すると思います。

@nortainあなたは間違いなくどちらも必要ありません。

this.httpClient.post(url, data, {responsesType: 'text'})

<string>を指定しなくても、 Observable<string>が提供されます。 'text' as 'text'と言う必要はありません、Typescriptはそれを知っています。

タイプパラメータをHttpClientメソッドに渡す必要がある_only_時間は、 responseType: 'json'です。 他のすべては暗黙的です。

@alxhubああ、ありがとうございます。それはもっと理にかなっています。ジェネリックを削除するときに、「テキスト」としてドロップしようとしなかったことに気づきました。 また、ジェネリックがjson応答を対象としていることを知っていると、役に立ちます。 フォローアップに感謝します。

@alxhub
observeプロパティで同じ問題に直面している

this.http.get(endpoint, {
      observe: 'response'
    })

[ts]
Argument of type '{ headers: HttpHeaders; observe: string; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'.
  Types of property 'observe' are incompatible.
    Type 'string' is not assignable to type '"body"'.

observe: 'body'のみが機能します。 'response'と'events'はそうではありません。

すべてが私にとって非常に複雑に感じます。 現在使用されている推論ではなく、さまざまな結果を呼び出すためのさまざまな方法が必要です。

@Pastafarian同意します。ある場合には、（同じresponseTypeオプションを使用して）次のように表示されます。

this.httpClient.requestを返します（ 'post'、 '/ login'、オプション）

動作しますが、これは動作しません：

this.httpClient.post（ '/ login'、options）を返します

このhttpclientが以前の化身よりも簡単または直感的であることに同意するかどうかはわかりません。 それどころか、それは不格好で、多くの裏での推論に依存しています。

私は本当にフォローすることはできません。 私のコードでこれに遭遇しました：

login(username: string, password: string): Observable<string> {
  const body = `username=${username}&password=${password}`;
  const options = {
    headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' }),
    responseType: 'text'
  };
  return this.http.post(this.loginUrl, body, options);
}

最新バージョンのVSCodeを使用すると、最後の行でoptionsが間違っていることがわかります。

Argument of type '{ headers: HttpHeaders; responseType: string; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'.
  Types of property 'responseType' are incompatible.
    Type 'string' is not assignable to type '"json"'.

コメントを読んで、回避策としてresponseType: 'text' as 'text'またはresponseType: 'text' as 'json'を書かなければならないと感じています。 わかりません、それはどういう意味ですか？

@tobihagemann responseType: 'text' as 'text'はあなたが望むものです。 'text'は'json' $ではありません。

ありがとう、@ alxhub。 私はあなたのコメントを読み直し、何が起こっているのか理解し始めます（もっと注意深く読むべきでした）。

インラインではなく、キャストするか、インラインではなく、タイプに依存するものにスプレッド演算子を使用するかを選択するのが私の選択だと思いますか？ 基本的に、これらの3つのオプション：

login(username: string, password: string): Observable<string> {
  const body = `username=${username}&password=${password}`;
  return this.http.post(this.loginUrl, body, {
    headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' }),
    responseType: 'text'
  });
}

login(username: string, password: string): Observable<string> {
  const body = `username=${username}&password=${password}`;
  const options = {
    headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' }),
    responseType: 'text' as 'text'
  };
  return this.http.post(this.loginUrl, body, options);
}

login(username: string, password: string): Observable<string> {
  const body = `username=${username}&password=${password}`;
  const options = {
    headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' }),
  };
  return this.http.post(this.loginUrl, body, { ...options, responseType: 'text' });
}

as 'text'バリアント（2番目のオプション）は、この問題で述べられているように、本当に「回避策」ですか？ それとも、それは物事を行うための単なる方法ですか？ 推奨されるオプションはありますか？

https://i.stack.imgur.com/jJoG2.jpg

これが私にとっての重要な答えでした： https ：//github.com/angular/angular/issues/18586#issuecomment -323216764

Typescriptコンパイラがリターンタイプについて文句を言わないようにするには、 get （またはpost ）の呼び出しでオプションオブジェクトをインライン化する必要があります。

resがArrayBufferではないと文句を言わずにこれをコンパイルする唯一の方法は、次のようなオプションをインライン化することです。

this.http.post<AuthResult>(this.AuthenticationEndpoint, 
    body, { withCredentials: false }).subscribe(res => {

このアプローチ全体は、直感に反する形です。 私はこれを何日も続けていますが、パラメータと応答としてのファイルを使用して、POSTリクエストの応答をコンソールログに記録することはできません。

髪を抜いています。

わかりました、これが私のために働いたものです：

アクション.ts：

generatePOR(){
  this._api.generatePOR(this.selection).subscribe(res => {
    if(res !== null && res !== undefined){
      console.log(res.body);
    }
  }, (error) => console.log(error), () => {});
}

api.ts：

generatePOR(idList): any {
  const apiURL = `${this.API_URL}/purchaseorders/generatePOR`;
  this.PORresult = this._http.post(apiURL, idList, {
    observe: 'response',
    headers: new HttpHeaders({'Content-Type': 'application/json'}),
    responseType: 'text' as 'text'
  }).catch(this.handleError);
  return this.PORresult;
}

これが、この重大な変更に対する私の回避策です。

const options: {
      headers?: HttpHeaders;
      observe: "response";
      params?: HttpParams;
      reportProgress?: boolean;
      responseType: "arraybuffer";
      withCredentials?: boolean;
    } = {
      observe: "response",
      responseType: "arraybuffer"
    };

this.http
    .get(blobRequest.url, options)
    .map(response => <ArrayBuffer>response.body)

また、ArrayBufferはgetによっても返されませんが、Responseオブジェクトは返されます。

以下に追加しただけで、Angular5でうまく機能しました。
const httpOptions = {
ヘッダー：新しいHttpHeaders（{
'Content-Type'： 'Application / json; charset = UTF-8 '
}）、
responseType： 'text' as'text '
};
const body = JSON.stringify（params）;
this._http.post（url、body、httpOptions）;を返します。

ここでも同じ問題が発生しました...「テキスト」として「テキスト」を追加すると解決しました...

const httpOptions = {
            headers: new HttpHeaders({
              'Content-Type':  'application/json',
              'Accept': 'text/html'
            })
        };
return this.http.post<any>(url, { 'new': new_elements, 'old': old_elements }, {...httpOptions, responseType: 'text' as 'json' });

ここの@jmoeyersonsに似ています... Angular 5.2.10

return this.http.post(
      url,
      data,
      { headers: headers, responseType: 'text' as 'text', withCredentials: false }).map(res => {
        console.log(res);
      });

また

return this.http.post<any>(
      url,
      data,
      { headers: headers, responseType: 'text' as 'json', withCredentials: false }).map(res => {
        console.log(res);
      });

これはまったく文書化されていません（https://angular.io/api/common/http/HttpClient#post）

TSは簡単です））

    const headers = new HttpHeaders({
        'Authorization': 'Bearer ' + token
    });
    const params = new HttpParams[]
    const observe = 'response';
    const reportProgress = false;
    const responseType = 'text';
    const withCredentials = false;

    const options = {
        headers: headers,
        observe: <any>observe,
        params: params,
        reportProgress: reportProgress,
        responseType: <any>responseType,
        withCredentials: withCredentials
    };

    return this.http.get<HttpResponse>(href, options);

responseType: 'text' as 'text'のようなものを見ると、私は壊れたように感じます。 たぶん、Http optionsオブジェクト全体が、明示的な列挙型を持つ明確に定義されたインターフェイスである必要があります。

@ghillert残念ながら、同じ問題が発生します。 インターフェイスのフィールドのタイプは、特定の値ではなく、列挙型になります。 HttpClientの型推論は、 get()に渡されるオブジェクトの型によって、特定の_value_型に絞り込まれます。

ただし、これには簡単な解決策があります。

const options = {
  headers: ...,
  params: ...,
  reportProgress: false,
  withCredentials: true,
};

return this.http.get(url, {...options, responseType: 'text'});

基本的には、 get()の呼び出しでresponseTypeとobserveの値を直接指定する必要があります。 他のすべてはoptionsオブジェクトに入れることができます。

これについては、次の場所で言及してください。

https://angular.io/guide/http#requesting -non-json-data

私のコード：

return this.http.get<string>(this.apiURLDisplays+'/'+name, { responseType: 'text' })
            .pipe(
                catchError(this.handleError)
            );

私はそれを理解していません-ngサーブは次のように爆発します：

ERROR in src/app/shared/api.service.ts(937,68): error TS2345: Argument of type '{ responseType: "text"; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'.
  Types of property 'responseType' are incompatible.
    Type '"text"' is not assignable to type '"json"'.

しかし、それはページを提供し、ブラウザで正常に動作します...それで、これは単なるタイプスクリプトの問題であり、どういうわけかまだjavascriptに変換されて動作しますか？

列挙型はもっと良かったでしょう...

また、 'text' as 'json'が機能すると言われている理由は、上記のようにget<string>()がある場合は、VSCodeにあると思います。 'text' as 'text'がある場合は、その下に赤い線が引かれますが、 'text' as 'json'

<string>がこの場合暗黙的であるという@alxhubのコメントを読んだところ、 <string>を取り出し、VSCodeはreturn this.http.get(this.apiURLDisplays+'/'+name, { responseType: 'text' as 'text' })を受け入れました

responseTypeと認証サービスの両方を使用して、これで動作させることができました。

let headers2: HttpHeaders = new HttpHeaders({
      'Authorization' : 'my-auth-token'
});

this.httpClient.get(this.url, { headers : headers2, responseType : 'blob' }).subscribe(
  data => console.log(data),
  err => console.log(err)
)

その前に、私はこれを試しました：

const httpOptions2 = {
  headers: new HttpHeaders({
    'Authorization' : 'my-auth-token'
  }),
  responseType : 'blob'
};

this.httpClient.get(this.url, httpOptions2).subscribe(
  data => console.log(data),
  err => console.log(err)
)

...パラメータとしてhttpOptions2でそれは私に与えるでしょう

タイプ '{ヘッダ​​ーの引数：HttpHeaders; responseType：文字列; } 'はタイプ' {ヘッダーのパラメータに割り当てることができませんか？：HttpHeaders | {[ヘッダー：文字列]：文字列| ストリング[]; }; 観察しますか？：「体」; params？：Ht ... '。

後者が使えない理由は何ですか？

*「my-auth-token」が変更されました

@ H36615

const httpOptions2 = {
  headers: new HttpHeaders({
    'Authorization' : 'my-auth-token'
  }),
  responseType : 'blob'
};

このスニペットでは、TypeScriptはhttpOptions2のタイプを推測します

{
  headers: HttpHeaders;
  responseType: string;
}

ただし、 HttpClientでは、渡すoptionsオブジェクトにresponseTypeまたはobserveの値がある場合、それらは特定のタイプであり、 stringだけではありません。

ここで何かが足りませんか？ このエラーが発生したのは、responseTypeblobだと思います。

const httpOptions = {
      ...
      responseType:'blob'
    };

タイプエラーが発生しますが、発生した場合

const httpOptions = {
      ...
      responseType:'blob' as 'blob'
    };

それはうまく機能します。 これがばかげていると私は間違っていると思いますか？

これは設計によるものであるという回答は、実際には良い答えではありません。そのパラメータが期待どおりに機能するHttpRequestを作成できれば、どこでも同じように機能することを期待できます。 そのドキュメントを取り上げると、このハッキーなアプローチについてはどこにも言及されていません。

確かに私はTypeScriptを初めて使用しますが、これはTypeScriptの問題ですか、それともAngularですか？

私は一日の大部分を、郵便配達員が正しい応答をしたのにhttp.getが応答しなかった理由を理解することに費やしました。 http：getを使ってみようと思いましたうまくいくかもしれませんが、うまくいきませんでした。 最終的に私はこのスレッドを見つけました、私が取らなければならなかったのを見ました昨年9月にroddyが提案したように、responseType： 'text'を 'text'として使用します。 それから私は投稿の最後まで読んで、それがまだ問題であることに気づきました。 これは修正する必要があると思います。または、直感的とはほど遠いため、少なくとも文書化する必要があります。

実際、最初の困惑の後の考え直しで、それは今のように私には理にかなっています
const httpOptions = { ... responseType:'blob' as 'blob' };
上記の@alxhubのどこかに、httpClientにリテラル表記を挿入することと同じではありません。

blobタイプの場合に行ったことは、Angular6ではエラーなしで正常に動作します。
responseType: 'blob' as 'blob'の両方で試しましたが、構文エラーが発生し、ビルドできませんでした。

const options = {headers: this.httpHeaders, responseType: 'blob' as 'json'};
return this.http.get<Blob>(Constants.BASE_URL + Constants.DOWNLOAD_FILE + path, options
)

私のために働いています

_downloadWeb(url, api, mimeType) { var token = getTokenWeb(); let data = { "siteId": this.state.idSite } Axios.defaults.headers.common['Authorization'] = $ {token} Axios.defaults.headers.common['Accept'] = $ {mimeType} Axios.defaults.headers.common['Content-Type'] = application / json Axios.post(url + api, data, { responseType: 'blob', }) .then((response) => { let blob = new Blob([response.data], { type: mimeType }); saveAs(blob, guid() + ".xlsx") }) .catch(function (error) { console.log("_downloadWeb", error); });; }

responseTypeを追加します： 'blob'は暗黙的に結果をObservableに変更します/観測可能>>

httpClient.postまたはhttpClient.getを入力しないと、問題が解決します

return this.httpClient.post<any>(
      `${environment.apiEndpoint}/${environment.apiVersion}/template-version/${templateId}/${version}/test`,
      { answers },
      { headers: this.blobHeaders, responseType: 'blob' })
      .pipe(
        tap(
          // Log the result or error
          data => console.log('You received data'),
          error => console.log(error)
        )
      );

エラーが発生しますが

return this.httpClient.post(
      `${environment.apiEndpoint}/${environment.apiVersion}/template-version/${templateId}/${version}/test`,
      { answers },
      { headers: this.blobHeaders, responseType: 'blob' })
      .pipe(
        tap(
          // Log the result or error
          data => console.log('You received data'),
          error => console.log(error)
        )
      );

作品

この問題はAngular7.1でも引き続き発生します

私は最終的にこれを思いつきました、そして私はそれを共有することができましたが：

// define this namespace somewhere
namespace ResponseType {
    export const JSON = 'json' as 'json';
    export const ArrayBuffer = 'arraybuffer' as 'arraybuffer';
    export const Blob = 'blob' as 'blob';
    export const Text = 'text' as 'text';
}

`` `typescript
//上記の名前空間をインポートし、次のように使用します
const reqOpts = {
params：params、
ヘッダー：ヘッダー、
responseType：ResponseType.JSON、
};

//タイプエラーなし、正しい署名が選択されています
const a = await this.http.get（url、reqOpts）;
const b = await this.http.get（url、reqOpts）;

https://github.com/angular/angular/issues/18586#issuecomment-327440092 gave a good hint at how to implement this.

This solution also work for the `observe` parameter.

____

Unless I missed something, this could be implemented in Angular directly, isn't ?

You would need to first put the following in the declaration `@angular/common/http/src/client.d.ts`:
```typescript
declare module '@angular/common/http' {
    export namespace HttpResponseType {
        export const JSON: 'json';
        export const ArrayBuffer: 'arraybuffer';
        export const Blob: 'blob';
        export const Text: 'text';
    }

    export declare type HttpObserve = 'body' | 'events' | 'response';
    export namespace HttpObserve {
        export const Body: 'body';
        export const Events: 'events';
        export const Response: 'response';
    }
}

次に、それをangular/packages/common/http/src/client.tsに実装します。

export namespace HttpResponseType {
    export const JSON: 'json' = 'json';
    export const ArrayBuffer: 'arraybuffer' = 'arraybuffer';
    export const Blob: 'blob' = 'blob';
    export const Text: 'text' = 'text';
}

export type HttpObserve = 'body' | 'events' | 'response';
export namespace HttpObserve {
    export const Body: 'body' = 'body';
    export const Events: 'events' = 'events';
    export const Response: 'response' = 'response';
}

最後に、2つの名前空間を適切にエクスポートして@angular/common/httpに戻す必要があります。

@rgoupilこれはクールなアイデアです！

私も同じ問題を抱えていました。 上記の提案のいくつかを実装しようとして30分後、私は次のことを進めませんでした（汚いですが...）：

// I actually get the response type as a parameter to my function
const responseType = 'text';

const options = {
    headers: new HttpHeaders()
};

// @ts-ignore
options['responseType'] = responseType;

this.http.get(url, options);

私はそれをハックする必要があります
const options = {responseType: 'text' as 'json'};
this.httpClient.get<string>(url, options).subscribe()

httpOptions変数をキャストしてObjectと入力します。

const httpOptions: Object = {
  responseType: 'blob'
};

ドキュメントで指定されているように：https ：//angular.io/api/common/http/HttpClient#get

これに関するニュースはありますか？ 私はHttpClient.postのオプションで同じ問題に苦しんでいます...

Angular 7での作業（8はまだテストされていません）

import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class RequestService {
  httpOptions = {
    headers: new HttpHeaders({
      Accept: 'application/json;charset=utf-8',
      Authorization: `Basic ${btoa('user:password')}`,
      'Content-Type': 'application/json;charset=utf-8'
    }),
    observe: 'response' as 'body'
  };

  constructor(private readonly httpClient: HttpClient) {
  }

  get<T>(uri: string): Observable<HttpResponse<T>> {
    return this.httpClient.get<HttpResponse<T>>(uri, this.httpOptions);
  }

  post<T>(uri: string, value: T): Observable<HttpResponse<T>> {
    return this.httpClient.post<HttpResponse<T>>(uri, value, this.httpOptions);
  }

  put<T>(uri: string, value: T): Observable<HttpResponse<T>> {
    return this.httpClient.put<HttpResponse<T>>(uri, value, this.httpOptions);
  }
}

私もこの問題を抱えていましたが、get呼び出しから<T>を削除することで、$＃ responseType: 'text'as 'text'を使用して動作させることができました。

たとえば、これは機能せず、エラーを返します。

const options: { responseType: 'text' as 'text', withCredentials: true };
this.httpClient.get<string>(url, options)

しかし、これは機能します：

const options: { responseType: 'text' as 'text', withCredentials: true };
this.httpClient.get(url, options)

この解決策は私のために働く

動作しません

const options= { 
        responseType:'arraybuffer'
      };
this.httpClient.get(url, options);

それは動作します

const options: any = {  //  The options with data type any does work well.
        responseType:'arraybuffer'
      };
this.httpClient.get(url, options);

const httpOptions: Object = {
  responseType: 'blob'
};

動作しません

const options= { 
        responseType:'arraybuffer'
      };
this.httpClient.get(url, options);

それは動作します

const options: any = {  //  The options with data type any does work well.
        responseType:'arraybuffer'
      };
this.httpClient.get(url, options);

オプションをanyまたはObjectとして宣言することは、 responseTypeの設定のみに関心があり、おそらくこの問題に遭遇した人々のほとんどのケースをカバーする場合は問題ありません。 ただし、他の何か（ヘッダーなど）を設定したい場合、typescriptはタイプチェックを支援できなくなります。 これが私が提案した理由であり、_bracket notation_を使用して_responseType_の値を設定し、その行のみを_ts-ignore_することを好みました。

コンパイラエラー（ Type '"text"' is not assignable to type '"json"'. ）を取り除くのに役立った解決策の1つは、コンストラクタを使用してHttpRequestを作成することでした。 そして、 http.requestを使用します。 誰かが助けてくれることを願っています