I'm pretty new to TS...I have this particular type:

export type MyType = {
  high: {
    age: number;
    preview: [{ [key: string]: string | number }];
  };
  low: {
    age: number;
    preview: [{ [key: string]: string | number }];
  };
  medium: {
    age: number;
    preview: [{ [key: string]: string | number }];
  };
};

I map through my Data object keys:

{Object.keys(data)          
         .map((item: string, key: number) => {
            return (
              data &&
              data[item]?.preview && (
                < component here >
              )
            );
          })}

The data type is correct, but TS complains about "data[item]?.preview".

It says:

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

Thanks

CodePudding user response：

The problem is due to the fact that the keys of MyType can only have three values : "medium" , "high" and "low".

But your item is of type string and this can include any string. TS complains.

Now you would think that you can add something like

objKeys.map((item: keyof MyType, key: number) => {

and this should work. But TS with Object.keys() is not returning an array of keys but still an array of strings. The Github thread shows that this is not gonna change in future.

So one way could be to add an intermediate step and typecast it using the as keyword:

{let objKeys = Object.keys(data) as Array<keyof MyType>          
         objKeys.map((item: keyof MyType, key: number) => {
            return (
              data &&
              data[item]?.preview && (
                < component here >
              )
            );
          })}

Playground Link