Передача аргумента параметров методу httpClient.post не всегда компилируется

Почему я не могу передать аргумент options при вызове метода httpClient.post<T>?

Следующий код не компилируется, когда я раскомментирую вторую строку возврата:

@Injectable()
export class CustomHttpService {

    constructor(private httpClient: HttpClient) { }

    public postWithHeaders<T>(url: string, body: string, headers?: HttpHeaders | null): Observable<T> {
        const options = {
            headers: this.prepareHeader(headers),
            observe: 'response' as 'body', // Have the response headers included in the response object
            responseType: 'json'
        };
        return this.httpClient.post<T>(url, body, this.prepareHeader(headers));
        // return this.httpClient.post<T>(url, body, options); why I cannot have this line instead of the above one ?
    }

    private prepareHeader(headers: HttpHeaders | null): object {
        headers = headers || new HttpHeaders();
        headers = headers.set('Content-Type', 'application/json');
        headers = headers.set('Accept', 'application/json');
        return headers;
    }

}

Это тем более озадачивает, когда я могу иметь в другом классе следующий исходный код, который прекрасно компилируется:

  public login(username: string, password: string): Observable<any> {
    console.info('Sending the login credentials to obtain a token');
    const credentials = { 'email' : username, 'password' : password };
    // Have the response headers included in the response object
    const options = {
      observe: 'response' as 'body'
    };
    const url: string = environment.USER_REST_URL + '/login';
    return this.httpClient.post<any>(url, credentials, options);
  }

IDE vscode показывает следующую проблему компиляции:

[ts]
L'argument de type '{ headers: object; observe: "body"; responseType: string; }' n'est pas attribuable au paramètre de type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'.
  Les types de la propriété 'headers' sont incompatibles.
    Impossible d'assigner le type 'object' au type 'HttpHeaders | { [header: string]: string | string[]; }'.
      Impossible d'assigner le type 'object' au type '{ [header: string]: string | string[]; }'.
        Signature d'index manquante dans le type '{}'.
const options: {
    headers: object;
    observe: "body";
    responseType: string;
}

И консоль показывает следующую проблему:

ERROR in src/app/core/service/custom-http.service.ts(17,51): error TS2345: Argument of type '{ headers: object; observe: "body"; responseType: string; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'.
  Types of property 'headers' are incompatible.
    Type 'object' is not assignable to type 'HttpHeaders | { [header: string]: string | string[]; }'.
      Type 'object' is not assignable to type '{ [header: string]: string | string[]; }'.
        Index signature is missing in type '{}'.

Проблема не связана с заголовками. Даже если удалить свойство headers из объекта параметров, проблема останется прежней.

ОБНОВЛЕНИЕ: проблема действительно была связана со свойством headers. Наличие типа возврата метода prepareHeader для HttpHeaders решило проблему. Почему IDE не отразила это, когда я пробовал это раньше, я не могу объяснить.

Я под Angular 6.0.4.

Что возвращает prepareHeader?

Suren Srapyan 25.08.2018 10:38

Это ошибка времени компиляции. Он создает экземпляр в своем теле и возвращает объект HttpHeaders. Проблема возникает, когда я раскомментирую второй оператор return и закомментирую первый.

Stephane 25.08.2018 10:44

Можете ли вы также показать вашу ошибку? Это касается типов

Suren Srapyan 25.08.2018 10:44
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
3
148
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в том, что тип возврата prepareHeader() - object. Поменяйте его на HttpHeaders. По этой причине компилятор выдает ошибку.

Type 'object' is not assignable to type 'HttpHeaders | { [header: string]: string | string[]; }'.

Измените тип возврата на HttpHeaders

private prepareHeader(headers: HttpHeaders | null): HttpHeaders {
        headers = headers || new HttpHeaders();
        headers = headers.set('Content-Type', 'application/json');
        headers = headers.set('Accept', 'application/json');
        return headers;
}

Также измените свойства observe и responseType следующим образом.

const options = {
            headers: this.prepareHeader(headers),
            observe: 'response' as 'body', // Have the response headers included in the response object
            responseType: 'json' as 'json'
};

Есть открытый проблема, связанный со свойствами observe и responseType.

Опять же, проблема не имеет ничего общего со свойством заголовков. Даже если я удалю это свойство из объекта параметров, проблема останется прежней.

Stephane 25.08.2018 12:09

У вас есть полный исходный код класса. Вы можете попытаться скомпилировать его в своей среде IDE, а затем воспроизвести проблему.

Stephane 25.08.2018 12:18

Пожалуйста, проверьте обновленный ответ. С этим связана открытая проблема. Взгляните на это, а также на работу, которую я предложил в своем ответе.

Amit Chigadani 25.08.2018 12:19

Проблема действительно была связана со свойством headers. Наличие типа возврата метода prepareHeader для HttpHeaders решило проблему. Почему IDE не отразила это, когда я пробовал это раньше, я не могу объяснить.

Stephane 25.08.2018 12:44

Другие вопросы по теме