TypeScript按pageNumber/sequence排序对象数组并解决类型报错

问题背景 #

API返回的响应格式如下（用变量简化展示）：

let response = [{
    id: 6789,
    pageNumber: null,
    sequence: 1
  },
  {
    id: 3456,
    pageNumber: 2,
    sequence: 3
  },
  {
    id: 1234,
    pageNumber: 1,
    sequence: 5
  },
  {
    id: 8967,
    pageNumber: null,
    sequence: 2
  }
]

排序需求 #

• pageNumber非null的元素排在数组前面，且这类元素按pageNumber升序排列
• pageNumber为null的元素按sequence升序排列

预期排序结果：

[{
    id: 1234,
    pageNumber: 1,
    sequence: 5
  },
  {
    id: 3456,
    pageNumber: 2,
    sequence: 3
  },
  {
    id: 6789,
    pageNumber: null,
    sequence: 1
  },
  {
    id: 8967,
    pageNumber: null,
    sequence: 2
  }
]

尝试的代码及报错 #

参考JS方案写出以下TypeScript代码，但出现类型错误：

response.sort((r1: any, r2: any) => {
    return (r1.pageNumber === null) - (r2.pageNumber === null) || r1.pageNumber - r2.pageNumber || r1.sequence - r2.sequence;
});

报错信息：

The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

解决方案 #

原因分析 #

报错核心是：当pageNumber为null时，r1.pageNumber - r2.pageNumber试图让null参与算术运算，TypeScript的类型检查不允许这种操作——即便用any声明参数，类型检查仍会识别到pageNumber可能为null的风险。

修正方案1：分支判断（清晰直观） #

通过明确分支判断，确保每一步算术运算的操作数都是合法数字类型：

response.sort((r1, r2) => {
  // 非null元素优先级高于null元素
  if (r1.pageNumber !== null && r2.pageNumber === null) {
    return -1;
  }
  if (r1.pageNumber === null && r2.pageNumber !== null) {
    return 1;
  }
  // 两者都非null时，按pageNumber升序
  if (r1.pageNumber !== null && r2.pageNumber !== null) {
    return r1.pageNumber - r2.pageNumber;
  }
  // 两者都为null时，按sequence升序
  return r1.sequence - r2.sequence;
});

修正方案2：简洁写法（类型转换+空值合并） #

通过将布尔值转为数字处理优先级，结合空值合并运算符??确保运算数合法：

response.sort((r1, r2) => {
  // 将null判断转为数字：null为1，非null为0，相减后非null元素排在前面
  const nullPriority = Number(r1.pageNumber === null) - Number(r2.pageNumber === null);
  if (nullPriority !== 0) {
    return nullPriority;
  }
  // 都非null时用pageNumber排序，都null时用sequence排序
  return (r1.pageNumber ?? r1.sequence) - (r2.pageNumber ?? r2.sequence);
});

补充：类型定义优化 #

如果需要更严谨的类型约束，可以先为响应元素声明类型，避免使用any：

interface ResponseItem {
  id: number;
  pageNumber: number | null;
  sequence: number;
}

const response: ResponseItem[] = [/* 数据内容 */];

这样TypeScript会自动推导参数类型，进一步避免类型错误。

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