TypeScript中Todo数组动态排序类型错误问题求助

问题重现 #

定义了如下ITodo接口：

interface ITodo {
  title: string
  body: string
  id: number
  completed: boolean
}

通过useState维护Todo数组，并用Select组件选择排序字段（title或body），在useMemo中实现排序逻辑时，使用变量sort作为索引触发类型错误：

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

错误提示：

The element is implicitly of type "any", since an expression of type "string" cannot be used for indexing of type "Todo". An index signature with a parameter of type "string" was not found in the "ITodo" type.

直接写死字段名（如a['title']）则正常运行。

核心原因 #

sort变量默认类型是string，TypeScript无法确认它是ITodo中存在且值为字符串的属性，因此无法推断a[sort]的类型，从而报错。而直接使用字面量'title'时，TypeScript能明确识别它是ITodo的属性且类型为string，所以不会触发错误。

解决方案 #

方案1：限定sort的类型为合法字段字面量 #

将filter.sort的类型限定为'title' | 'body'（仅允许这两个合法排序字段），让TypeScript明确知道sort只能是ITodo中值为字符串的属性：

1. 调整filter的状态类型：

// 初始sort设为空字符串，或默认值'title'
const [filter, setFilter] = useState<{ sort: 'title' | 'body' | '' }>({ sort: '' });

2. 确保Select组件的onChange参数类型匹配：

<Select
    value={filter.sort}
    onChange={(selectedSort: 'title' | 'body') => setFilter({ ...filter, sort: selectedSort })}
    options={[
       { value: 'title', name: 'By title' },
       { value: 'body', name: 'By body' }
    ]}
    defaultValue='Sorting'
/>

此时sort的类型不再是宽泛的string，TypeScript会自动推断a[sort]为string，localeCompare调用合法，错误消失。

方案2：使用类型守卫缩小sort的类型范围 #

如果无法直接限定sort的初始类型，可通过类型守卫函数确认sort是合法的字符串字段：

1. 定义类型守卫：

function isTodoStringKey(key: string): key is 'title' | 'body' {
  return key === 'title' || key === 'body';
}

2. 在排序逻辑中使用类型守卫：

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

当isTodoStringKey(sort)返回true时，TypeScript会将sort的类型缩小为'title' | 'body'，从而确认a[sort]是string类型。

方案3：添加索引签名（不推荐） #

给ITodo添加字符串索引签名，允许任意字符串索引，但会丢失部分类型安全性：

interface ITodo {
  title: string
  body: string
  id: number
  completed: boolean
  // 允许任意字符串键，值为string/number/boolean
  [key: string]: string | number | boolean;
}

此时仍需额外断言a[sort]为string，否则无法调用localeCompare：

return [...todos].sort((a, b) => (a[sort] as string).localeCompare(b[sort] as string));

该方案的风险是：如果sort传入id或completed，断言会导致运行时错误，因此不推荐使用。

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