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

Question

I'm new to typescript and I met an error I can't understand after finding an online tuto to sort data on Reactjs with react hooks. Here the part of my component code where I get the error:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index

Job.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>
              ))}
)
}

Answer 1

The error message is telling you that the type of the sortProperty variable is string, but it is being used to index into an object. So you will need to update the types object to have an index signature like this

interface StringIndexedObject {
    [key: string]: string;
}


const types: StringIndexedObject = {
    jobName: 'jobName',
    created: 'created',
    modified: 'modified',
};

This will allow you to use a string to index into the types object and the correct type will be inferred for the resulting value.