优化按特定对象属性（数字、字符串）排序方法：实现通用化排序逻辑的解决方案问询

当然可以实现这种通用化的排序方法！核心思路是利用TypeScript的类型系统确保属性名的安全性，同时动态根据属性类型执行对应的排序逻辑，彻底摆脱重复的switch-case代码。下面是具体的实现方案：

1. 先确保类型安全的列名约束 #

首先，我们可以用keyof ElectronicDeliveryType来约束排序方法的columnName参数，这样TypeScript会自动提示合法的属性名，避免拼写错误，同时也能和你定义的DeliveryDetailsColumns常量完美匹配（因为它的value就是ElectronicDeliveryType的属性名）。

2. 编写通用的比较函数 #

我们需要一个能根据属性类型自动选择排序逻辑的比较函数，同时处理可选属性可能为undefined的情况：

const compareValues = <T extends ElectronicDeliveryType, K extends keyof T>(
  a: T,
  b: T,
  key: K
): number => {
  const valA = a[key];
  const valB = b[key];

  // 处理值为undefined的情况（可根据需求调整排序优先级）
  if (valA === undefined && valB === undefined) return 0;
  if (valA === undefined) return -1; // undefined排在前面
  if (valB === undefined) return 1;

  // 字符串类型：用localeCompare做不区分大小写的比较（比toLowerCase更严谨）
  if (typeof valA === 'string' && typeof valB === 'string') {
    return valA.localeCompare(valB, undefined, { sensitivity: 'base' });
  }

  // 数字类型：直接做差值比较
  if (typeof valA === 'number' && typeof valB === 'number') {
    return valA - valB;
  }

  // 特殊处理日期字符串（比如expectedDelivery）：转成Date对象比较
  if (key === 'expectedDelivery') {
    const dateA = new Date(valA as string);
    const dateB = new Date(valB as string);
    return dateA.getTime() - dateB.getTime();
  }

  // 其他类型默认返回0（可根据需求扩展）
  return 0;
};

3. 整合到Pinia的排序方法中 #

现在你可以把原来的switch-case替换成这个通用函数，同时根据排序顺序（升序/降序）反转比较结果：

sortBySelectedColumnOrder(
  columnName: keyof ElectronicDeliveryType,
  sortOrder: 'ascending' | 'descending'
) {
  this.filteredValues.sort((a, b) => {
    const comparison = compareValues(a, b, columnName);
    // 根据排序方向调整结果
    return sortOrder === 'ascending' ? comparison : -comparison;
  });
}

调用示例 #

因为DeliveryDetailsColumns的value就是ElectronicDeliveryType的合法属性名，所以调用时直接传常量即可，完全符合类型约束：

// 按标题升序排序
this.sortBySelectedColumnOrder(DeliveryDetailsColumns.Title, 'ascending');
// 按价格降序排序
this.sortBySelectedColumnOrder(DeliveryDetailsColumns.Price, 'descending');

方案优势 #

• 无重复代码：新增列时，只要在ElectronicDeliveryType和DeliveryDetailsColumns中添加对应属性，排序方法无需修改
• 类型安全：TypeScript会自动校验columnName的合法性，避免拼写错误
• 可扩展性：如果后续需要支持其他类型（比如布尔值、日期对象），只需在compareValues函数中添加对应的分支即可
• 处理边界情况：考虑了可选属性为undefined的场景，避免运行时错误

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