元素隐式具有'any'类型，因为类型 'string | number' 的表达式不能用于索引类型

Question

我得到错误:

Element implicitly has an 'any' type because expression of type 'string | number' 
can't be used to index type 'IStorage'.
No index signature with a parameter of type 'string' was found on type 'IStorage'.

我在其他帖子中看到这个问题，但它对我的情况没有意义。我有这样的界面:

interface IStorage {
id: number
name: string
vendor_id: string
start_date: Date | null
end_date: Date | null
app: string
}

和这个函数:

handleSetStorageValues = (index: number) => (event: {
name: string | number
value: string | number
}) => {
const storage = [...this.state.storage]
storage[index][event.name] = event.value // --> error here at [event.name]
this.setState(
prevState => {
return {
...prevState,
storage,
}
}
)
}

如何为它指定索引签名类型?event.name引用了name属性，我也从输入的name属性中获得了这个属性。谢谢你！

Answer 1

用于访问IStorage的密钥的正确类型是keyof IStorage。

您可以将event.name的类型更改为keyof IStorage。像这样:

event: {
name: keyof IStorage
value: string | number
}

这将修复读取错误，但您将无法写入(分配)值。

您可能想要更改event.value的类型。像这样:

event: {
name: keyof IStorage
value: IStorage[keyof IStorage]
}

这也不起作用，因为现在你不匹配name和value，所以TS会抱怨，因为一些组合是不允许的。

很可能你最终会将类型转换为any，并承担类型检查的责任。

(storage[index] as any)[event.name] = event.value

可能这样做的唯一类型安全的方法是手动检查每个属性，这些属性可以是IStorage的键，并且每个值都是相同的。随着IStorage的变化，这将变得越来越困难。