Ant Design Table自定义排序器函数触发Columns类型错误求助

错误原因 #

TypeScript无法推断compareStringsByKey的泛型参数T（表格行数据类型）和K（行数据的属性键）。当前的ColumnTypes是从Ant Design Table的通用参数中提取的，没有绑定具体的行数据类型，导致sorter字段对应的行数据类型被推断为unknown，进而让key参数的类型变成never，抛出类型不匹配错误。

修复方案 #

1. 明确表格行数据类型 #

先定义你的表格行数据结构，明确每个字段的类型：

// 定义表格行数据的具体类型
interface TableRow {
  id: string;
  // 补充其他表格字段的类型定义...
}

2. 重新定义列类型，绑定行数据类型 #

替换原来的ColumnTypes定义，直接使用Ant Design的TableColumnType并指定行数据类型：

// interfaces.ts
import { TableColumnType } from 'antd';

// 绑定具体的行数据类型TableRow，让列类型关联明确的数据结构
export type ColumnTypes = TableColumnType<TableRow>;

3. 调整列定义并正确调用排序函数 #

现在TypeScript能正确推断泛型参数，你可以直接调用compareStringsByKey，也可以显式指定泛型来确保类型安全：

import { ColumnTypes } from './interfaces';
import { TableRow } from './your-types-file'; // 导入行数据类型

export const columns: (ColumnTypes & {
  editable?: boolean;
  dataIndex: keyof TableRow; // 把dataIndex限制为TableRow的属性键，提升类型严谨性
})[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: '12rem',
    ellipsis: true,
    // 自动推断泛型，或者显式指定：compareStringsByKey<TableRow, 'id'>('id')
    sorter: compareStringsByKey('id'),
    editable: true,
  },
  //...其他列配置
];

补充：优化排序函数的类型约束 #

可以给排序函数添加额外的类型约束，确保传入的key对应的字段一定是string类型，避免不必要的类型断言：

const compareStringsByKey =
  <T, K extends keyof T>(key: K extends { [P in keyof T]: T[P] extends string ? P : never }[keyof T] ? K : never) =>
  (objA: T, objB: T): number => {
    // 此处无需类型断言，TypeScript已确认T[K]为string类型
    const upperStrA = objA[key].toUpperCase();
    const upperStrB = objB[key].toUpperCase();

    return upperStrA.localeCompare(upperStrB, 'en', {
      numeric: true,
      sensitivity: 'base',
      caseFirst: 'lower',
    });
  };

这样如果传入的key对应的字段不是string类型，TypeScript会提前抛出错误，进一步提升代码安全性。

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