Typescript index error: looping through keys of typed object

Question

I have an interface that's created as an extension of a couple of other interfaces from an external library:

interface LabeledProps extends TextProps, ComponentProps {
    id: string;
    count: number;
    ...
}

In another place in the code, I have an object of type LabeledProps and I would like to loop through all its properties:

function myFunc(props: LabeledProps):void {
    for (let key in props) {
        const val = props[key];  // <-- ERROR IS HERE
        // do other stuff
    }
}

The line const val = props[key] throws a typescript error (though the compiled code actually runs just fine):

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'LabeledProps'.

What is the right way (or ways) to accomplish this? Thanks!

(Note: I know I could add [key: string]: any to the interface definition and that will remove the error message, but I would like an actual fix, not just a hiding-the-error fix.)

No, because "the left-hand side of a for...in statement cannot use a type annotation" — ebbishop
– ebbishop, Commented Jun 28, 2021 at 18:32
Common pattern to iterate with for ... in is: let key: keyof (typeof obj); for (key in obj) ... — aleksxor
– aleksxor, Commented Jun 28, 2021 at 19:58

Никита Нигматуллин · Accepted Answer · 2021-06-28 18:56:43Z

3

In this case, you want to iterate over object pairwise. There is a useful utility, called Object.entries, which removes the error.

type LabeledProps = {
    name: string,
    age: number
}

const obj: LabeledProps = {
    name: 'Maks', age: 18
}

for (let [ key, value ] of Object.entries(obj)) {
    ...
}

answered Jun 28, 2021 at 18:56

Никита Нигматуллин

3141 silver badge9 bronze badges

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

Comments

roberto tomás · Accepted Answer · 2021-06-29 19:18:44Z

0

function myFunc(props: LabeledProps):void {
    Object.values(props).forEach(val => {
        // do other stuff
    });
}

I agree with the other answers here and the comments. The responses of others were all great, and this is only offered as yet another way to do it.

answered Jun 29, 2021 at 19:18

roberto tomás

4,7477 gold badges47 silver badges87 bronze badges

Comments

Ameer Hamza · Accepted Answer · 2022-10-01 14:52:36Z

0

In this case you can use keyof (object operator) to explicitly tell interpreter. For example:

function myFunc(props: LabeledProps):void {
    for (let key in props) {
        const val = props[key as keyof LabeledProps]; 
        // do other stuff
    }
}

answered Oct 1, 2022 at 14:52

Ameer Hamza

10813 bronze badges

Collectives™ on Stack Overflow

Typescript index error: looping through keys of typed object

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related