如何在TypeScript中按名称调用不同签名的方法？

嘿，看你这代码是在给Angular的HTTP请求做通用封装对吧？先把你写的代码规整一下，方便咱们分析：

myFct() { 
  this[type](url, params, options).pipe(...) 
} 

get<T>(url: string, params: HttpParams, options: any): Observable<HttpEvent<T>> { 
  return this._http.get<T>(url, options); 
} 

post<T>(url: string, params: HttpParams, options: any): Observable<HttpEvent<T>> { 
  return this._http.post<T>(url, params, options); 
} 

put<T>(url: string, params: ...

这里我发现几个可以优化的点，帮你把这个通用请求方法打磨得更靠谱：

1. get方法的params没生效：你定义了params参数，但实际调用this._http.get的时候没把它放到options里，导致URL参数根本传不上去
2. post方法的参数混淆：Angular的post方法第二个参数是请求体（body），但你把params传进去了，这会导致原本应该放在URL上的参数被当成请求体发送，逻辑不对
3. type参数无约束：this[type]里的type如果传错值会直接报错，最好给它加个类型限制，避免拼写错误
4. 通用逻辑可以更集中：既然做通用方法，就把错误处理、日志、token注入这类逻辑都放到pipe里统一维护，不用每个请求单独写

给你改了一版优化后的代码，你可以参考：

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class HttpService {
  constructor(private _http: HttpClient) {}

  // 通用请求入口，约束请求类型为get/post/put
  myFct<T>(type: 'get' | 'post' | 'put', url: string, body?: any, params?: HttpParams, options?: any): Observable<HttpEvent<T>> {
    // 统一处理URL参数，合并到options中
    const requestOptions = {
      ...options,
      params: params || new HttpParams()
    };

    let request$: Observable<HttpEvent<T>>;
    // 根据请求类型分发到对应HTTP方法
    switch (type) {
      case 'get':
        request$ = this._http.get<T>(url, requestOptions);
        break;
      case 'post':
        request$ = this._http.post<T>(url, body || {}, requestOptions);
        break;
      case 'put':
        request$ = this._http.put<T>(url, body || {}, requestOptions);
        break;
      default:
        throw new Error(`不支持的请求类型：${type}`);
    }

    // 这里放通用逻辑，比如日志、错误拦截、loading状态更新
    return request$.pipe(
      tap(event => {
        // 成功请求的通用处理，比如打印日志
        if (event.type === 4) { // 对应HttpResponse的类型码
          console.log(`[${type.toUpperCase()}] 请求成功：${url}`, event);
        }
      }),
      catchError(error => {
        // 通用错误处理，比如全局弹窗提示、上报错误
        console.error(`[${type.toUpperCase()}] 请求失败：${url}`, error);
        // 重新抛出错误，让调用方可以自定义处理
        throw error;
      })
    );
  }

  // 快捷调用方法，简化使用
  get<T>(url: string, params?: HttpParams, options?: any): Observable<HttpEvent<T>> {
    return this.myFct<T>('get', url, undefined, params, options);
  }

  post<T>(url: string, body?: any, params?: HttpParams, options?: any): Observable<HttpEvent<T>> {
    return this.myFct<T>('post', url, body, params, options);
  }

  put<T>(url: string, body?: any, params?: HttpParams, options?: any): Observable<HttpEvent<T>> {
    return this.myFct<T>('put', url, body, params, options);
  }
}

这样改完之后，不仅解决了原来的参数问题，还让通用逻辑更集中，后续要加全局token、loading状态都直接在myFct的pipe里加就行，不用改每个请求方法。另外通过联合类型约束type，也避免了传错请求类型的低级错误。

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