Typescript 错误：元素隐式具有 \'any\' 类型，因为类型 \'string\' 的表达式不能用于索引答案

【问题标题】：Typescript error : Element implicitly has an 'any' type because expression of type 'string' can't be used to indexTypescript 错误：元素隐式具有 \'any\' 类型，因为类型 \'string\' 的表达式不能用于索引
【发布时间】：2023-01-09 02:38:59
【问题描述】：

我是 typescript 的新手，在找到一个使用 react hooks 对 Reactjs 上的数据进行排序的在线教程后，我遇到了一个我无法理解的错误。这是我收到错误的组件代码部分：

元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引

作业.tsx：

export default function Jobs() {

const [data, setData] = useState([])
  const [sortType, setSortType] = useState('name')

  useEffect(() => {
    const sortArray = (type: string) => {
      const types = {
        jobName: 'jobName',
        created: 'created',
        modified: 'modified'
      }
      const sortProperty = types[type]
      const sorted = [...tasks].sort(
        (a, b) => new Date(b[sortProperty]) - new Date(a[sortProperty])
      )
      console.log(sorted)
      setData(sorted)
    }

    sortArray(sortType)
  }, [sortType])
  return (

            <div className="font-bold">Sort by:</div>
            <select
              onChange={(e) => setSortType(e.target.value)}
              className="text-center px-5 bg-gray-200 rounded-xl"
            >
              <option value="id">Id</option>
              <option value="jobName">Job name</option>
              <option value="created">Newest</option>
              <option value="modified">Last modified</option>
            </select>
            <div>({tasks.length} users)</div>

   {data.map((task) => (
                <tr
                  key={task.id}
                  className="tableau text-center cursor-pointer"
                  onClick={() => router.push(`/job/${task.id}`)}
                >
                  <td className="py-3">{task.jobName}</td>
                  <td className="py-3">
                    <div className="flex items-center gap-5 justify-center">
                      {task.created}
                    </div>
                  </td>
                  <td className="py-3">
                    <div className="flex items-center gap-5 justify-center">
                      {task.modified}
                    </div>
                  </td>
              ))}
)
}

【问题讨论】：

标签： reactjs typescript sorting next.js typeerror

【解决方案1】：

错误消息告诉您 sortProperty 变量的类型是字符串，但它正用于对对象进行索引。因此，您需要更新类型对象以具有这样的索引签名

const types = {
  jobName: 'jobName',
  created: 'created',
  modified: 'modified',
  [key: string]: string
}

这将允许您使用字符串来索引类型对象，并且将为结果值推断出正确的类型。

【讨论】：