TypeScript第三方类方法包装器编写及类型问题排查

问题背景 #

我需要给各类第三方API/SDK编写一个包装器，实现标准化且可定制的请求日志记录。核心思路是：将第三方API实例（通常通过new API()创建）传入APIClient包装类，同时传入「API方法-日志函数」的映射配置，遍历配置后在APIClient实例上重新定义对应方法，调用原API方法后自动执行日志函数，保证包装后的API与原接口行为一致，同时支持自定义扩展。

在实现过程中遇到两个TypeScript类型错误：

1. Type 'Function' provides no match for the signature '(...args: any): any'
2. No index signature with a parameter of type 'string' was found on type 'ApiClient<T>'

错误原因分析 #

1. 第一个错误：
   • 原代码中用宽泛的Function类型判断方法，TypeScript无法精准推断函数的参数和返回值签名，导致类型不匹配。
   • _api的类型被错误定义为构造函数类型，但实际需要调用的是API实例的方法，类型逻辑完全颠倒。
2. 第二个错误：
   • Object.entries()返回的键是string类型，但ApiClient类没有定义字符串索引签名，TypeScript无法确认这些字符串键属于API实例的方法名。
   • 原logConfig的类型绑定到了构造函数的静态属性，而非API实例的方法，导致键的类型范围错误。

修复方案与代码实现 #

核心修复点 #

• 调整泛型逻辑：让ApiClient的泛型直接对应API实例类型（而非构造函数），符合实际传参场景。
• 优化方法类型提取：用精确的函数签名替代宽泛的Function类型，保证类型推断准确。
• 添加索引签名：允许动态给ApiClient实例添加方法，解决Object.entries的字符串键类型问题。
• 修正配置类型：让日志配置的键对应API实例的方法名，而非构造函数属性。

完整修复代码 #

// 提取实例中的方法类型，并统一包装为异步函数
type Method<T, K extends keyof T> = T[K] extends (...args: any[]) => infer R 
  ? (...args: Parameters<T[K]>) => Promise<R> 
  : never;

class ApiClient<T extends object> {
  private _api: T;
  // 添加字符串索引签名，支持动态挂载方法
  [key: string]: any;

  constructor(api: T, logConfig: Partial<Record<keyof T, () => void>>) {
    this._api = api;

    // 将Object.entries的键断言为API实例的方法名，明确类型
    for (const [methodName, logFn] of Object.entries(logConfig) as [keyof T, () => void][]) {
      this[methodName] = this.createWrappedMethod(methodName, logFn);
    }
  }

  private createWrappedMethod<K extends keyof T>(methodName: K, logFn: () => void): Method<T, K> {
    return async (...args: Parameters<T[K]>) => {
      try {
        // 调用原API方法，断言为函数类型确保可执行
        const result = await (this._api[methodName] as (...args: any[]) => any)(...args);
        // 执行自定义日志逻辑
        logFn();
        return result;
      } catch (error) {
        // 保留原API的错误抛出行为，同时可添加错误日志
        console.error(`调用方法${String(methodName)}失败:`, error);
        throw error;
      }
    } as Method<T, K>;
  }
}

使用示例 #

// 模拟第三方API类
class ThirdPartyAPI {
  getUser(id: number): Promise<{ id: number; name: string }> {
    return Promise.resolve({ id, name: "test" });
  }
  
  updateUser(id: number, data: { name: string }): Promise<boolean> {
    return Promise.resolve(true);
  }
}

// 创建API实例
const apiInstance = new ThirdPartyAPI();

// 创建包装后的客户端，配置日志逻辑
const wrappedApi = new ApiClient(apiInstance, {
  getUser: () => console.log("getUser请求已完成"),
  updateUser: () => console.log("updateUser请求已完成")
});

// 调用方法，自动触发日志
wrappedApi.getUser(1).then(user => console.log(user));
wrappedApi.updateUser(1, { name: "newName" }).then(res => console.log(res));

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