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

Question

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

Does this answer your question? TypeScript: Object.keys return string[] — massic80
– massic80, Commented Feb 25, 2022 at 14:30

Tushar Shahi · Accepted Answer · 2023-01-19 07:33:50Z

16

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

edited Jan 19, 2023 at 7:33

answered Oct 7, 2021 at 10:48

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user16469315 Over a year ago

Thanks for your reply..Now it says: Argument of type '(item: keyof MyType, key: number) => JSX.Element | undefined' is not assignable to parameter of type '(value: string, index: number, array: string[]) => Element | undefined'. Types of parameters 'item' and 'value' are incompatible. Type 'string' is not assignable to type 'keyof MyType'. It doesnt complain anymore about: data[item]?.preview

Tushar Shahi Over a year ago

I have added the playground link too. Have you made the intermediate object objKeys. Please check the answer, and maybe add a similar Playground link to show your issue

user16469315 Over a year ago

Yes, I've created the variable const tabsKeys = Object.keys(data) as Array<keyof MyType>; In the loop I have: {tabsKeys .map((item: keyof MyType, key: number) => { return ( data && data[item]?.preview && ( <Component data={data && data[item].preview} /> ) ); })} The <Component/> has as type prop: data: { [key: string]: string }[];

Tushar Shahi Over a year ago

Please add playground link. Difficult to figure out like this.

Justin Meskan Over a year ago

Thanks this worked well for me, I was stuck for a hot second.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related