Angular封装HttpClient重载get方法报TS2393重复实现错误

TypeScript 不支持编写多个带实际函数体的同名函数实现，这是触发TS2393: Duplicate function implementation的核心原因。
Angular 原生HttpClient的get方法没有同类报错，是因为它完全遵循TS函数重载的语法规则：

• 所有同名get的多态定义都是重载签名：仅声明参数类型、返回值类型，不包含函数实现逻辑
• 所有重载声明完成后，才会编写唯一一个实现签名：承载实际执行逻辑，且参数类型必须兼容所有前置重载的入参范围
  TS编译阶段会擦除所有类型标注、泛型参数，你当前写的两个带函数体的get方法，编译到JS层面都是get(url, options) { ... }结构，同名同参数列表自然会被判定为重复实现。

按照TS重载规则调整代码结构：先声明两个对应不同返回场景的重载签名（不带函数体），最后编写一个兼容所有场景的统一实现即可，参考代码：

// 重载1：返回泛型类型的JSON响应体
get<T>(url: string, 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?: 'json';
  withCredentials?: boolean;
}): Observable<T>;

// 重载2：返回Blob类型的完整Http响应
get(url: string, options: {
  headers?: HttpHeaders | {
    [header: string]: string | string[];
  };
  observe: 'response';
  context?: HttpContext;
  params?: HttpParams | {
    [param: string]: string | number | boolean | ReadonlyArray<string | number | boolean>;
  };
  reportProgress?: boolean;
  responseType: 'blob';
  withCredentials?: boolean;
}): Observable<HttpResponse<Blob>>;

// 统一实现，兼容所有重载场景
get(url: string, options?: any): Observable<any> {
  return this.handleRequest(this.http.get(url, options));
}

实现签名里的options类型用any是适配层最简便的写法，如果需要更严格的类型约束，可以自行定义覆盖所有重载场景的联合类型作为入参类型。

内容的提问来源于stack exchange，提问作者Stefan