G F

export type ApiResponse<T> =
  | { errors: Array<{ [key: string]: string }> }
  | { data: Array<T> }
  | { text: string };

abstract class Api<T> {
  protected readonly baseUrl: string;
  protected readonly endPoint: string;

  protected get url(): string {
    return new URL(this.endPoint, this.baseUrl).toString();
  }

  protected constructor(baseUrl = '/', endPoint: string) {
    this.baseUrl = baseUrl;
    this.endPoint = endPoint;
  }

  protected async http({
    url = '',
    method = 'GET',
    data = undefined,
  }: RequestData): Promise<ApiResponse<T>> {
    try {
      const response: Response = await fetch(
        (new URL(url, this.url).toString()),
        { method, body: data }
      );
      return await response.json();
    } catch (e) {
      console.error(e.message);
      return { text: e.message };
    } finally {
      // finnally
    }
  }
}

class ApiPost extends Api<Post> {
  constructor(baseUrl: string, endPoint: string) {
    super(baseUrl, endPoint);
  }

  async list(count?: number): Promise<false | Array<Post>> {
    const response: ApiResponse = await this.http({
      url: `${count ? `?_limit=${count}` : ''}`,
    });

    if (Array.isArray(response))
      return response;

    return false;
  }
}

Какой формат более эффективен с точки зрения обучения и образования? Что говорит ваш опыт по этому поводу?

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