TypeScript报错：表达式类型string无法索引，React Hooks排序求助

你遇到的 Element implicitly has an 'any' type because expression of type 'string' can't be used to index 错误，核心原因是 TypeScript 无法确认 sortProperty 是任务对象的合法键，因此默认将索引后的类型判定为 any，触发了严格类型检查报错。以下是具体修复步骤：

1. 定义明确的 Task 类型接口 #

先给任务数据定义强类型，让 TypeScript 清楚每个任务的结构：

interface Task {
  id: string | number;
  jobName: string;
  created: string; // 假设是 ISO 格式日期字符串
  modified: string;
}

2. 修正 useState 的类型声明 #

原来的空数组和字符串没有类型约束，需要明确指定：

// 给数据数组指定 Task 数组类型
const [data, setData] = useState<Task[]>([]);
// 将 sortType 限定为下拉选项中的合法值，避免无效输入
const [sortType, setSortType] = useState<'id' | 'jobName' | 'created' | 'modified'>('jobName');

注意：你原来的 sortType 初始值是 'name'，但下拉选项中没有该值，改成 'jobName' 更合理。

3. 修复排序函数的类型逻辑 #

让排序函数的参数类型与 sortType 匹配，并确保排序属性是 Task 的合法键：

useEffect(() => {
  const sortArray = (type: 'id' | 'jobName' | 'created' | 'modified') => {
    // 映射合法的排序属性，确保与 Task 接口对应
    const validSortProps: Record<typeof type, keyof Task> = {
      id: 'id',
      jobName: 'jobName',
      created: 'created',
      modified: 'modified'
    };
    const sortProperty = validSortProps[type];

    // 区分不同属性的排序逻辑：id 非日期，jobName 是字符串，其余是日期
    const sorted = [...tasks].sort((a, b) => {
      if (sortProperty === 'id') {
        // 若 id 是字符串，可改用 a.id.localeCompare(b.id)
        return Number(a.id) - Number(b.id);
      } else if (sortProperty === 'jobName') {
        return a.jobName.localeCompare(b.jobName);
      } else {
        return new Date(b[sortProperty]) - new Date(a[sortProperty]);
      }
    });
    setData(sorted);
  };

  sortArray(sortType);
}, [sortType, tasks]); // 务必将 tasks 加入依赖数组，确保数据变化时重新排序

4. 修复其他潜在问题 #

• 确保组件中使用的 tasks 变量是 Task[] 类型（比如从接口请求或状态中获取）
• 确认 router.push 已正确引入（如 Next.js 的 useRouter）

通过以上步骤，TypeScript 能明确识别 sortProperty 是 Task 对象的合法键，既解决了索引类型错误，也让代码的类型约束更严谨，避免无效输入导致的逻辑问题。

内容的提问来源于stack exchange，提问作者Rom-888