Как создать обертку вокруг HttpClient?

Question

[G F]

Пытаюсь создать обертку над HttpClient, но не получается нормально описать типы.
У HttpClient по 15 оверлоадов на каждый метод (https://angular.io/api/common/http/HttpClient)
Поскольку они очень похожи, я решил вынести одинаковый контент в общий тип и сделал следующее:

type Observe = 'body' | 'events' | 'response';
type ResponseType = 'arraybuffer' | 'blob' | 'text' | 'json';

interface Params<O extends Observe, R extends ResponseType> {
  url: string;
  body: any | null;
  options?: {
    headers?:
      | HttpHeaders
      | {
          [header: string]: string | string[];
        };
    observe?: O;
    params?:
      | HttpParams
      | {
          [param: string]: string | string[];
        };
    reportProgress?: boolean;
    responseType: R;
    withCredentials?: boolean;
  };
}
export class MyHttpClient {
  constructor(private readonly http: HttpClient) {}

  put(params: Params<'body', 'arraybuffer'>): Observable<ArrayBuffer>; // This overload signature is not compatible with its implementation signature.
  put(params: Params<'body', 'blob'>): Observable<Blob>;
  put(params: Params<'body', 'text'>): Observable<string>;
  put(params: Params<'events', 'arraybuffer'>): Observable<HttpEvent<ArrayBuffer>>;
  put(params: Params<'events', 'blob'>): Observable<HttpEvent<Blob>>;
  put(params: Params<'events', 'text'>): Observable<HttpEvent<string>>;
  put(params: Params<'events', 'json'>): Observable<HttpEvent<Object>>;
  put<T>(params: Params<'events', 'json'>): Observable<HttpEvent<T>>;
  put(params: Params<'response', 'arraybuffer'>): Observable<HttpResponse<ArrayBuffer>>;
  put(params: Params<'response', 'blob'>): Observable<HttpResponse<Blob>>;
  put(params: Params<'response', 'text'>): Observable<HttpResponse<string>>;
  put(params: Params<'response', 'json'>): Observable<HttpResponse<Object>>;
  put<T>(params: Params<'response', 'json'>): Observable<HttpResponse<T>>;
  put(params: Params<'body', 'json'>): Observable<Object>;
  put<T>(params: Params<'body', 'json'>): Observable<T> {
    return this.http.put<T>(params.url, params.body, params.options);
  }
}

Все оверлоады в той же последовательности как в оригинальном клиенте
Но тайпскрипт считает типы несопоставимыми (This overload signature is not compatible with its implementation signature.)

Есть ли у кого-то опыт создания такой или похожей обертки? Возможно ли это сделать сохранив все типы? Может быть еще какие-то советы относительно того, что я пытаюсь сделать... Хелп

Comments

[WbICHA]

А так не подойдёт?

put: HttpClient[put] = (url, body, options) {
  return this.http.put(url, body, options);
}

[G F]

WbICHA, скорее всего нет, потому что мне нужно расширить аргументы

[WbICHA]

G F, ну, хз, попробуй тогда что через доставание параметров намутить, только там массив на выходе, а тебе объект нужен.
https://www.typescriptlang.org/docs/handbook/utili...

[G F]

WbICHA, с оверлоадами не работает

[G F]

Я проделал те же степы, и в итоге пришел к тому что в вопросе)

Answer 1

[Дмитрий Беляев]

У реализации должна быть наиболее общая сигнатура от всех перегрузок. Притом типы в реализации работают только внутрь, а наружу торчат только перегрузки:

export class MyHttpClient {
  constructor(private readonly http: HttpClient) {}

  put(params: Params<'body', 'arraybuffer'>): Observable<ArrayBuffer>;
  put(params: Params<'body', 'blob'>): Observable<Blob>;
  put(params: Params<'body', 'text'>): Observable<string>;
  put(params: Params<'events', 'arraybuffer'>): Observable<HttpEvent<ArrayBuffer>>;
  put(params: Params<'events', 'blob'>): Observable<HttpEvent<Blob>>;
  put(params: Params<'events', 'text'>): Observable<HttpEvent<string>>;
  put(params: Params<'events', 'json'>): Observable<HttpEvent<Object>>;
  put<T>(params: Params<'events', 'json'>): Observable<HttpEvent<T>>;
  put(params: Params<'response', 'arraybuffer'>): Observable<HttpResponse<ArrayBuffer>>;
  put(params: Params<'response', 'blob'>): Observable<HttpResponse<Blob>>;
  put(params: Params<'response', 'text'>): Observable<HttpResponse<string>>;
  put(params: Params<'response', 'json'>): Observable<HttpResponse<Object>>;
  put<T>(params: Params<'response', 'json'>): Observable<HttpResponse<T>>;
  put(params: Params<'body', 'json'>): Observable<Object>;
  put(params: Params<Observe, ResponseType>): Observable<unknown> {
    return this.http.put(params.url, params.body, params.options as Params<'body', 'json'>['options']);
  }
}

А вообще, мне почему-то кажется, что так будет гораздо проще:

type ResponseTypeMap = {
  arraybuffer: ArrayBuffer;
  blob: Blob;
  text: string;
  json: Object;
};
type ResponseTypes = keyof ResponseTypeMap;
type ObserveWrapperMap<T extends ResponseTypeMap[ResponseTypes]> = {
  body: Observable<T>;
  events: Observable<HttpEvent<T>>;
  response: Observable<HttpResponse<T>>;
};
type ObserveWrappers = keyof ObserveWrapperMap<ResponseTypeMap[ResponseTypes]>;
type Result<O extends ObserveWrappers, R extends ResponseTypes> = ObserveWrapperMap<ResponseTypeMap[R]>[O];
type Params<O extends ObserveWrappers, R extends ResponseTypes> = {
  url: string;
  body: any;
  options?: {
    headers?: HttpHeaders | Record<string, string | string[]>;
    observe?: O;
    params?: HttpParams | Record<string, string | string[]>;
    reportProgress?: boolean;
    responseType: R;
    withCredentials?: boolean;
  };
}

export class MyHttpClient {
  constructor(private readonly http: HttpClient) {}

  put<O extends ObserveWrappers = 'body', R extends ResponseTypes = 'json'>(params: Params<O, R>): Result<O, R> {
    const {url, body, options} = params as Params<'body', 'json'>;
    return this.http.put(url, body, options) as Result<O, R>;
  }
}

особенно если помимо put будут и другие методы

Comments

[G F]

Большое спасибо, мне идея с 15 перегрузками тоже не нравилась, попробую завтра ваш подход, он гораздо читабельнее.

[Дмитрий Беляев]

G F, кстати, вот еще в исходниках нарыл:
https://github.com/angular/angular/blob/11.0.8/pac...
по сути у HttpClient метод put и сам обертка над методом request, что-то мне подсказывает, что вот так можно без приведения типов обойтись:

put<O extends ObserveWrappers = 'body', R extends ResponseTypes = 'json'>(params: Params<O, R>): Result<O, R> {
    const {url, body, options} = params;
    return this.http.request<any>('PUT', url, {...options, body});
}

[G F]

Дмитрий Беляев, да я тоже его видел, но сегодня времени разобраться не хватило, попробую завтра, но в принципе даже с тайпкастом пойдет, главное чтобы return type возвращался нормальный. Да и вообще я это все затеял только потому что в паре запросов юзаются блобы и бафферы, так-то там json в 99% случаев, просто было интересно сделать такую обёртку, особенно после того как ничего толкового на эту тему не нашел в Гугле. Спасибо за помощь ещё раз)

[acwartz]

G F, Дмитрий Беляев, а зачем такое надо? (оборачивать чей-то класс) и как собственно задумка с интерфейсом работает? Идеи не уловил :(

[Дмитрий Беляев]

acwartz, зачем такое надо, это к G F, а вот работает за счет дженерика, которым связаны аргумент и возвращаемый тип, но так как в аргументе дженерик поля не обязательные, я добавил тип по умолчанию в дженерик

[G F]

acwartz, у меня в метод (get, put...) передается 2 колбека - beforeRequest, afterRequest, где исполняется код до и после реквеста, как правило это сет лоадинг стейта в сторы. + на каждом методе (get, put...) есть пайп, который ловит ошибки.

[G F]

Единственное, не разобрался как при таком подходе сделать чтобы возвращался не только object тип, но и дженерик (как в дефолтном клиенте). Мне кажется это невозможно (думаю если было бы возможно ребята из Гугла не стали бы писать 15 оверлоадов). Поэтому оставил эту идею и вынес в отдельный метод. (Т.е. просто put отдельно, с опшинами отдельно.)