英文:
Typescript error : Element implicitly has an 'any' type because expression of type 'string' can't be used to index
问题
我对TypeScript还很陌生，我在找了一个关于在Reactjs中使用React钩子对数据进行排序的在线教程后遇到了一个我无法理解的错误。以下是我在组件代码中遇到错误的部分：
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>
))}
)
}
英文:
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>
))}
)
}
答案1
得分: 1
错误消息告诉您，sortProperty变量的类型是字符串，但它被用于索引对象。因此，您需要更新types对象，使其具有这样的索引签名
interface StringIndexedObject {
[key: string]: string;
}
const types: StringIndexedObject = {
jobName: 'jobName',
created: 'created',
modified: 'modified',
};
这将允许您使用字符串来索引types对象，并且将为生成的值推断出正确的类型。
英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论