TypeScript中如何为React对象的排序列正确定义类型

报错的核心原因是sortColumn变量的类型为通用string类型，而你定义的AllExisting接口仅存在id/date/short/original四个固定的可索引键，未声明支持任意字符串作为键的索引签名，因此TS不允许用未收窄的字符串类型变量索引AllExisting类型的对象。

这是最推荐的类型安全方案，实现步骤如下：

1. 首先定义AllExisting的合法键联合类型，同时给组件内的sortColumn状态指定该类型：

// 定义合法的排序键类型，仅包含AllExisting的可枚举字段
type AllExistingSortKey = keyof AllExisting

// 类组件的State类型定义示例
interface ComponentState {
  // 你的其他state字段
  sortColumn: AllExistingSortKey
  // 如果允许未选中排序列的场景，可改为可选类型：sortColumn?: AllExistingSortKey
}

2. 修正排序函数，同时注意Array.sort为原地排序方法，需要先浅拷贝原数组避免修改原始数据源：

const doSortColumn = (a: AllExisting, b: AllExisting) => {
  // 此时sortColumn已经是合法的键类型，TS不会再报索引错误
  if (typeof a[sortColumn] === 'string') {
    return (a[sortColumn] as string).localeCompare(b[sortColumn] as string)
  }
  return (a[sortColumn] as number) - (b[sortColumn] as number)
}

// 调用时先浅拷贝数组再排序
[...allExisting].sort(doSortColumn).map((r) => <TableRow row={r} onEdit={this.handleEdit} />)

如果表头点击事件传入的列名是自定义字符串，需要确保传入的值和AllExisting的字段名完全一致，不要传入显示用的别名。

如果不需要类型安全，可选择以下任意一种快速解决：

• 单文件全局关闭TS校验：在当前TS文件的第一行添加注释 // @ts-nocheck
• 单一行忽略报错：在每一行报错代码的上方添加注释 // @ts-ignore，单独忽略该行的类型校验
• 给接口加通用索引签名：修改AllExisting接口，添加任意字符串键的索引声明：

interface AllExisting {
  id: number;
  date: string;
  short: string;
  original: string;
  // 新增索引签名，允许任意字符串作为键
  [key: string]: number | string | undefined
}

针对你调整后出现的新渲染报错，可优先排查以下常见问题：

• Array.sort为原地排序方法，直接调用会修改原始的allExisting数组，可能引发重复渲染、数据异常问题，必须先浅拷贝数组再排序
• 检查sortColumn为空的边界场景，是否存在用undefined索引对象的情况，需要加非空判断兜底
• 检查TableRow组件接收的row属性的类型定义，是否和AllExisting接口完全匹配，是否有字段缺失或类型不兼容

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