如何复用参数重载定义实现不同返回值的TypeScript函数？

在TypeScript中，你可以通过定义泛型重载函数类型来复用重复的参数签名，只需为不同函数指定对应返回值类型，就能避免重复编写重载定义。

步骤1：定义共享的泛型重载类型 #

先创建一个泛型类型，封装需要复用的所有参数重载签名，将返回值设为泛型参数：

// 假设已定义基础类型
type RouteOptions = { path: string };
type Route = { url: string; handler: () => void };

// 泛型重载函数类型，T 为返回值类型
type RouteOverloadedFn<T> = {
  (url: RouteOptions): T;
  (url: string, options?: RouteOptions): T;
};

步骤2：在类中复用该类型 #

在Router类里直接使用这个泛型类型定义方法，传入对应返回值即可：

class Router {
  // 复用重载参数，返回值为 void
  addRoute: RouteOverloadedFn<void>;
  // 复用重载参数，返回值为 Route
  createRoute: RouteOverloadedFn<Route>;

  // 方法实现（参数需兼容所有重载签名）
  addRoute(url: RouteOptions | string, options?: RouteOptions) {
    // 业务逻辑实现
    const targetUrl = typeof url === 'string' ? url : url.path;
    console.log(`添加路由：${targetUrl}`);
  }

  createRoute(url: RouteOptions | string, options?: RouteOptions): Route {
    // 业务逻辑实现
    const targetUrl = typeof url === 'string' ? url : url.path;
    return { url: targetUrl, handler: () => {} };
  }
}

原写法不可行的原因 #

TypeScript不支持直接在方法参数位置用OverloadedFunctionParameters这类类型替代完整参数列表，重载签名必须明确参数结构。而泛型函数类型的方式，是把重复的参数签名封装成可复用的完整函数结构，仅将返回值抽离为可变参数，符合TS的类型规则。

扩展复杂场景 #

如果实际有更多重载签名，只需在RouteOverloadedFn中新增对应签名，所有复用该类型的函数会自动继承所有重载：

type RouteOverloadedFn<T> = {
  (url: RouteOptions): T;
  (url: string, options?: RouteOptions): T;
  (method: 'GET' | 'POST', url: string, options?: RouteOptions): T; // 新增重载
};

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