CODEWITHSUNDEEP
javascripttypescript
user16469315
user16469315

Reputation: 89

Typescript error No index signature with a parameter of type 'string' was found on type

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

Upvotes: 1

Views: 20109

Answers (1)

Tushar Shahi
Tushar Shahi

Reputation: 20431

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

Upvotes: 16

Related Questions