TypeScript中Todo列表排序类型错误问题求助

问题根源 #

报错核心原因：sort变量被推断为string类型，但TypeScript无法确认该字符串对应ITodo接口中值为string类型的合法属性（ITodo还包含id(number)、completed(boolean)这类非字符串属性），直接用a[sort]会触发类型安全检查错误。

解决方案步骤 #

1. 定义合法的排序字段类型

创建仅包含ITodo中值为字符串的属性类型，确保排序字段只能是title或body：

// 通用工具类型：提取对象中值为string类型的键名
type StringKeys<T> = {
  [K in keyof T]: T[K] extends string ? K : never
}[keyof T];

// 针对ITodo的合法排序字段类型
type SortableTodoField = StringKeys<ITodo>;

如果字段固定，也可以直接写死：

type SortableTodoField = 'title' | 'body';

2. 修正Filter状态的类型声明

确保filter.sort的类型是SortableTodoField而非默认的string：

const [filter, setFilter] = useState<{ sort?: SortableTodoField }>({
  sort: undefined
});

3. 修正Select组件的类型约束

让Select的选项值严格匹配SortableTodoField：

<Select
  value={filter.sort}
  onChange={(selectedSort: SortableTodoField) => 
    setFilter({ ...filter, sort: selectedSort })
  }
  options={[
    { value: 'title' as SortableTodoField, name: '按标题排序' },
    { value: 'body' as SortableTodoField, name: '按内容排序' }
  ]}
  defaultValue='排序方式'
/>

（如果你的Select组件支持泛型，可直接指定Select<SortableTodoField>省去as断言）

4. 修正排序函数的类型问题

现在sort的类型是SortableTodoField，TypeScript能明确推断a[sort]是string类型，localeCompare调用不再报错：

const sortedTodos = useMemo(() => {
  if (!sort) return todos;
  
  return [...todos].sort((a, b) => {
    return a[sort].localeCompare(b[sort]);
  });
}, [sort, todos]);

解决逻辑说明 #

通过将sort的类型从宽泛的string缩小到仅包含合法排序字段的SortableTodoField，TypeScript可以：

• 确保只有title/body能被用作排序依据，避免传入非法字段
• 明确识别a[sort]的类型为string，保证localeCompare方法调用合法

内容的提问来源于stack exchange，提问作者Андрей Димитриев