在类型"{ 约会：{ 标签：字符串;id：字符串;最小宽度：数字;} 上找不到具有类型为"string"的参数的索引签名[];}'

Question

我是React和Typescript的新手。我试图根据输入(props(从配置文件中读取信息，但Typescript似乎不接受。你知道如何处理它吗？

config.json

{
"table_headers": {
"appointments": [
{
"label": "ID",
"id": "id",
"minWidth": 30
},
{
"label": "Name",
"id": "name",
"minWidth": 70
}
...

TableComponent.tsx

interface TableComponentProps {
headerType: string,
rows: string
}
export default function TableComponent(props: TableComponentProps) {
const [header] = useState(config.table_headers[props.headerType].map((header) => header)) // Here getting the error

错误内容

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ appointments: { label: string; id: string; minWidth: number; }[]; }'. No index signature with a parameter of type 'string' was found on type '{ appointments: { label: string; id: string; minWidth: number; }[]; }'.ts(7053)

Answer 1

正如Drarig29所评论的，将TableComponent.tsx编辑到下面的代码解决了这个问题。

interface TableComponentProps {
headerType: 'appointments' | string,
rows: string
}

谢谢！