如何实现类型安全的泛型函数combineAndSortLists并修复相关错误？

问题分析 #

你当前的函数存在两个核心问题：

1. 类型推导错误：传入不同类型的数组时，TypeScript会自动将泛型T推导为第一个数组的类型（比如Task），导致返回类型不是预期的Task | Tasklist联合类型。
2. 排序类型报错：无法保证sortKey对应的属性一定是数字类型，TypeScript会提示算术运算的类型不匹配。

修复后的完整代码 #

export function combineAndSortLists<T extends readonly any[], K extends keyof T[number]>(
  lists: { [Idx in keyof T]: T[Idx][] },
  sortKey: K
): T[number][] {
  const combinedList: T[number][] = [];

  // 简化合并逻辑
  for (const list of lists) {
    combinedList.push(...list);
  }

  // 安全处理排序的数值类型
  combinedList.sort((a, b) => {
    const valA = a[sortKey];
    const valB = b[sortKey];
    // 确保参与运算的是数字，处理undefined/null/非数字情况
    const numA = typeof valA === 'number' ? valA : Number(valA) || 0;
    const numB = typeof valB === 'number' ? valB : Number(valB) || 0;
    return numA - numB;
  });

  return combinedList;
}

// 原接口与数据定义
interface Task {
  id?: number;
  task: string;
  done: boolean;
  tasklistId?: number | null;
  group?: "tasks" | "tasksDone";
  order?: number;
}

interface Tasklist {
  id?: number;
  title: string;
  tasks: Task[];
  done?: boolean;
  group?: "tasks" | "tasksDone";
  order?: number;
}

const tasks: Task[] = [{ task: "Wake up", done: false, order: 0 }];
const tasklists: Tasklist[] = [{ title: "Morning Tasks", tasks: [{ task: "Eat", done: true}, { task: "Work out", done: false }], order: 1 }];

// 无需手动指定泛型，自动推导返回(Task | Tasklist)[]
const newlist = combineAndSortLists([tasks, tasklists], "order");
console.log(newlist);

关键修复细节 #

1. 自动推导联合类型 #

• 泛型T extends readonly any[]用于捕获输入数组中每个元素的类型（比如[Task, Tasklist]）。
• { [Idx in keyof T]: T[Idx][] }约束输入的lists是一个由对应类型数组组成的数组。
• 返回类型T[number][]直接得到所有元素类型的联合数组，这里自动推导为(Task | Tasklist)[]，完全符合预期，无需手动指定泛型。

2. 解决排序算术类型错误 #

• 原代码中a[sortKey] ?? 0的问题在于TypeScript无法确定属性类型，这里通过typeof valA === 'number'显式判断数字类型，对非数字类型尝试转换为数字，转换失败则默认用0兜底。
• 确保参与减法运算的都是数字类型，彻底消除TypeScript的类型报错。

3. 简化数组合并逻辑 #

• 用for...of循环配合扩展运算符push(...list)替代嵌套for循环，代码更简洁，逻辑不变。

验证效果 #

现在调用combineAndSortLists([tasks, tasklists], "order")时：

• TypeScript自动推导返回类型为(Task | Tasklist)[]，无需手动指定泛型。
• 排序逻辑无类型报错，同时兼容属性不存在、非数字的边界情况。

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