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

Question

I am getting the error:

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'.

I see this issue in other posts but it doesn't make sense to my case. I have this interface below:

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

and this function:

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,
       }
     }
   )
}

How do I specify the index signature type for this? event.name is referring to the name property that I am also getting from the name attribute on the input. Thank you!

Answer 1

The proper type for a key that's gonna be used to access IStorage is keyof IStorage .

You may change the type for event.name to keyof IStorage . Something like this:

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

This will fix the read error, but you won't be able to write (assign) values.

You may think that you want to change the type for event.value . Something like this:

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

This won't work either, as now you do not match a name with a value so TS will complain as some combinations are not allowed.

Most likely you'll end up casting to any and taking the heat for the type checking.

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

Probably the only type safe way of doing this is do manual checks for each property that can be a key of IStorage and the same for each value. This will become increasingly difficult as IStorage changes.