TypeScript封装类方法时fetch函数的类型错误问题及解决咨询

嗨，我来帮你拆解下你遇到的这两个TypeScript错误，再给你对应的解决办法~

首先先还原你的代码场景：

abstract class Test {
  public abstract method1(param1: string): number;
  public abstract method2(param1: number, param2: string): Promise<number>;
}

class Wow {
  constructor(private test: Test) {}

  public fetch<K extends keyof Test>(key: K, params: Parameters<Test[K]>): ReturnType<Test[K]> {
    return this.test[key](params);
  }
}

错误原因分析 #

你遇到的两个错误其实是两个独立的问题：

1. 参数数量不匹配（错误2554）：Parameters<Test[K]>返回的是一个元组类型（比如method1对应[string]，method2对应[number, string]），但你直接把整个元组作为单个参数传给this.test[key]，而目标方法需要的是元组里的每个元素作为独立参数，自然会报“参数数量不对”的错误。
2. 返回类型不匹配（错误2322）：虽然你声明了返回类型是ReturnType<Test[K]>，但TypeScript的泛型推断在这里没办法自动把this.test[key](...)的返回值（联合类型number | Promise<number>）精确收缩到当前K对应的具体返回类型，所以会报联合类型无法赋值给具体泛型类型的错误。

解决办法 #

只需要对fetch方法做两处小改动即可：

class Wow {
  constructor(private test: Test) {}

  public fetch<K extends keyof Test>(key: K, ...params: Parameters<Test[K]>): ReturnType<Test[K]> {
    // 用展开运算符拆元组为独立参数，加类型断言帮助TS收缩类型
    return this.test[key](...params) as ReturnType<Test[K]>;
  }
}

改动说明：

• ...params: Parameters<Test[K]>：把参数改成剩余参数形式，这样传入的元组会被自动拆成目标方法需要的独立参数，完美解决参数数量不匹配的问题。
• as ReturnType<Test[K]>：这里的类型断言是安全的——因为我们明确保证了传入的key和params是完全对应的，TypeScript只是没办法自动推断这层关联，所以用断言帮它确认返回类型和泛型K的对应关系，解决类型不匹配的错误。

这样修改后，你的fetch方法就能正确实现“根据传入的Test类方法名，自动匹配对应参数和返回值类型”的需求啦~

备注：内容来源于stack exchange，提问作者CrystalSpider