React中复用函数：如何适配单个UserDto与UserDto数组参数

要让你的函数同时兼容单个UserDto和UserDto[]类型的参数，最简洁的方式是统一内部处理逻辑为数组操作，同时通过TypeScript类型定义确保调用时的类型安全，下面是两种可行方案：

方案1：TypeScript函数重载（推荐） #

通过定义重载签名，明确函数支持的两种调用方式，内部将参数统一转为数组后执行逻辑，既保留类型提示，又避免重复代码：

// 先定义两种调用签名
function processUser(id: string, user: UserDto): void;
function processUser(id: string, users: UserDto[]): void;

// 函数实现，处理两种参数类型
function processUser(id: string, userOrUsers: UserDto | UserDto[]): void {
  // 把单个用户转为数组，统一后续逻辑
  const targetUsers = Array.isArray(userOrUsers) ? userOrUsers : [userOrUsers];

  // 原有的单用户处理逻辑，现在遍历数组执行即可
  targetUsers.forEach(user => {
    // 这里写你的业务逻辑，比如：
    console.log(`关联ID: ${id}，处理用户:`, user);
    // 比如更新状态、调用后端接口等操作
  });
}

调用示例：

// 第一个组件传单个UserDto
processUser("1001", singleUser);

// 第二个组件传UserDto数组
processUser("1002", userList);

方案2：直接兼容联合类型（简化版） #

如果不需要严格的重载签名提示，也可以直接将参数类型设为UserDto | UserDto[]，内部判断后统一处理，逻辑和上面一致：

function processUser(id: string, userOrUsers: UserDto | UserDto[]): void {
  const targetUsers = Array.isArray(userOrUsers) ? userOrUsers : [userOrUsers];
  
  targetUsers.forEach(user => {
    // 业务逻辑代码
  });
}

注意事项 #

如果你的函数有返回值，比如原函数返回单个UserDto，可以调整返回值类型为UserDto | UserDto[]，并根据输入类型返回对应结果：

function processUser(id: string, user: UserDto): UserDto;
function processUser(id: string, users: UserDto[]): UserDto[];

function processUser(id: string, userOrUsers: UserDto | UserDto[]): UserDto | UserDto[] {
  const targetUsers = Array.isArray(userOrUsers) ? userOrUsers : [userOrUsers];
  
  const processedUsers = targetUsers.map(user => ({
    ...user,
    associatedId: id
  }));

  // 输入是单个则返回单个，输入是数组则返回数组
  return Array.isArray(userOrUsers) ? processedUsers : processedUsers[0];
}

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