TypeScript 工具类型：ReturnType、Parameters

TypeScript 提供了强大的类型推导能力，其中 ReturnType 和 Parameters 是两个非常实用的内置工具类型。它们能自动从函数中提取返回值类型或参数类型，避免手动重复定义，提升代码健壮性和开发效率。

理解 ReturnType：提取函数的返回类型

ReturnType<T> 的作用是从一个函数类型 T 中自动推导出它的返回值类型。你不需要知道函数内部逻辑，只要传入函数类型，就能拿到它“吐出来”的东西是什么类型。

使用场景：当你需要基于某个函数的返回值定义变量、接口字段或另一个函数的返回类型时，用 ReturnType 可以确保类型完全同步，避免手动写错。

基础用法

假设有一个函数：

function getUserInfo() {
  return { id: 1, name: "Alice", active: true };
}

你想定义一个变量，其类型必须和 getUserInfo 的返回值一致。不要手动写 { id: number; name: string; active: boolean }，而是这样写：

type UserInfo = ReturnType<typeof getUserInfo>;

这里的关键是 typeof getUserInfo —— 它获取的是函数本身的类型（即 () => { id: number; name: string; active: boolean }），然后 ReturnType 从中提取返回部分。

现在你可以安全地声明变量：

const info: UserInfo = getUserInfo();

如果将来 getUserInfo 的返回结构变了（比如新增 email 字段），UserInfo 类型会自动更新，无需你手动修改。

在接口或泛型中使用

你也可以在接口中使用 ReturnType：

interface ApiResponse {
  data: ReturnType<typeof fetchUserData>;
  timestamp: number;
}

或者配合泛型函数：

function wrapInPromise<T extends (...args: any[]) => any>(fn: T) {
  return (...args: Parameters<T>): Promise<ReturnType<T>> => {
    return Promise.resolve(fn(...args));
  };
}

这个高阶函数接收任意函数 fn，返回一个新函数，其参数类型与原函数一致，返回类型则是原函数返回值的 Promise 包装。这里同时用到了 Parameters 和 ReturnType（下文详述）。

理解 Parameters：提取函数的参数类型

Parameters<T> 的作用是从函数类型 T 中提取其参数列表的元组类型。例如，一个函数 (a: string, b: number) => void，它的 Parameters 类型就是 [string, number]。

使用场景：当你需要转发函数调用、创建代理函数，或验证传入参数是否符合某个函数签名时，Parameters 能确保参数类型精确匹配。

基础用法

继续用上面的 getUserInfo 函数，但它现在带参数：

function createUser(name: string, age: number, isActive: boolean) {
  return { name, age, isActive };
}

提取参数类型：

type CreateUserParams = Parameters<typeof createUser>; // [string, number, boolean]

现在你可以用这个元组类型来约束其他变量：

const args: CreateUserParams = ["Bob", 30, true];
const user = createUser(...args); // ✅ 类型安全

如果尝试写成 ["Bob", "30", true]，TypeScript 会报错，因为第二个元素必须是 number。

实现函数代理或缓存

假设你要写一个简单的缓存函数，只对相同参数的调用返回缓存结果：

function memoize<T extends (...args: any[]) => any>(fn: T): T {
  const cache = new Map<string, ReturnType<T>>();

  return ((...args: Parameters<T>) => {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key)!;
    }
    const result = fn(...args);
    cache.set(key, result);
    return result;
  }) as T;
}

这里：

• Parameters<T> 确保代理函数接收和原函数完全一致的参数。
• ReturnType<T> 确保缓存的值类型正确。
• 最终通过 as T 断言返回类型与原函数一致。

调用示例：

const memoizedCreateUser = memoize(createUser);
const u1 = memoizedCreateUser("Alice", 25, true); // 首次计算
const u2 = memoizedCreateUser("Alice", 25, true); // 返回缓存

两次调用参数完全相同，第二次直接走缓存，且类型完全安全。

组合使用：构建类型安全的工具函数

ReturnType 和 Parameters 经常一起出现，用于构建通用、类型安全的高阶函数。

示例：延迟执行函数

你想写一个 delayedCall 函数，接收一个函数和延迟毫秒数，返回一个新函数，调用时会延迟执行原函数：

function delayedCall<
  T extends (...args: any[]) => any
>(fn: T, ms: number): (...args: Parameters<T>) => Promise<ReturnType<T>> {
  return async (...args: Parameters<T>) => {
    await new Promise(resolve => setTimeout(resolve, ms));
    return fn(...args);
  };
}

使用：

const delayedCreateUser = delayedCall(createUser, 1000);
// delayedCreateUser 的类型是 (name: string, age: number, isActive: boolean) => Promise<{ name: string; age: number; isActive: boolean }>

调用时：

const newUser = await delayedCreateUser("Charlie", 28, false);

整个过程类型链完整：参数类型来自 Parameters，返回类型是 Promise<ReturnType>，无任何类型断言或冗余定义。

注意事项与限制

虽然 ReturnType 和 Parameters 很强大，但有几点必须注意：

1. 只能用于函数类型
   如果你传入一个非函数类型（如 string、number 或普通对象），TypeScript 会报错：

   type Bad = ReturnType<string>; // ❌ Type 'string' does not satisfy the constraint '(...args: any) => any'.

2. 对重载函数的支持有限
   如果函数有多个重载签名，ReturnType 和 Parameters 通常只取最后一个签名。例如：

   function add(a: number, b: number): number;
   function add(a: string, b: string): string;
   function add(a: any, b: any): any {
     return a + b;
   }
   
   type R = ReturnType<typeof add>; // any（不是 number | string）

   这种情况下，建议避免直接使用，或显式指定具体签名。

3. 箭头函数与命名函数行为一致
   无论是 function foo() {} 还是 const foo = () => {}，typeof foo 都能正确获取函数类型，因此 ReturnType 和 Parameters 同样适用。

4. 类方法需谨慎
   对于类的方法，直接使用 typeof MyClass.prototype.method 才能获取正确的函数类型：

   
   class Service {
     fetchData(id: number): string {
       return `data-${id}`;
        }
      }
   
      type FetchReturn = ReturnType<typeof Service.prototype.fetchData>; // string
      type FetchParams = Parameters<typeof Service.prototype.fetchData>;  // [number]
      ```
   
   ---
   
   ## 实战：自动推导 API 响应类型
   
   假设你有一组 API 调用函数，希望自动生成对应的响应类型接口，避免重复定义。
   
   ```ts
   // api.ts
   export function getProfile(userId: string) {
     return fetch(`/api/profile/${userId}`).then(res => res.json());
   }

export function updateSettings(theme: string, lang: string) {
return fetch('/api/settings', {
method: 'POST',
body: JSON.stringify({ theme, lang })
}).then(res => res.json());
}

现在，在另一个文件中自动推导类型：

```ts
// types.ts
import { getProfile, updateSettings } from './api';

type ProfileResponse = ReturnType<typeof getProfile>;     // Promise<any>（实际项目中应配合 JSDoc 或 schema）
type SettingsResponse = ReturnType<typeof updateSettings>; // Promise<any>

虽然这里返回的是 Promise<any>（因为 fetch().then(res => res.json()) 没有显式类型），但如果你在函数上加了 JSDoc 或使用了类型断言，就能获得精确类型：

interface ProfileData {
  id: string;
  name: string;
  avatarUrl: string;
}

/**
 * @returns {Promise<ProfileData>}
 */
export function getProfile(userId: string) {
  return fetch(`/api/profile/${userId}`).then(res => res.json()) as Promise<ProfileData>;
}

此时：

type ProfileResponse = ReturnType<typeof getProfile>; // Promise<ProfileData>
type ProfileDataOnly = Awaited<ReturnType<typeof getProfile>>; // ProfileData（需 TypeScript 4.5+）

结合 Awaited 工具类型，还能进一步解包 Promise，实现端到端的类型安全。

总结关键用法表

// 正确提取类方法类型
class MathUtils {
  static add(a: number, b: number): number {
    return a + b;
  }
}

type AddParams = Parameters<typeof MathUtils.add>; // [number, number]
type AddReturn = ReturnType<typeof MathUtils.add>; // number

记住：typeof 操作符在类型上下文中（如 ReturnType<typeof fn>）获取的是函数的类型，而不是运行时的值。这是 TypeScript 类型系统的核心机制之一。

通过熟练使用 ReturnType 和 Parameters，你可以写出更少重复、更强健、更易维护的 TypeScript 代码。