Error in Typescript index: iterating over properties of a typed object

Question

Error in Typescript index: iterating over properties of a typed object

My scenario involves an interface that extends multiple other interfaces from an external library:

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

In a different section of the codebase, there is an object of type LabeledProps and I need to iterate through all its properties:

function myFunc(props: LabeledProps):void {
    for (let key in props) {
        const val = props[key];  // <-- ERROR IS HERE
        // carry out additional tasks
    }
}

The line const val = props[key] triggers a TypeScript error (even though the code still compiles and executes correctly):

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

What is the correct approach (or approaches) to address this issue? Thank you!

(Note: While adding [key: string]: any to the interface definition would eliminate the error message, I am seeking a genuine resolution rather than just masking the error.)

javascript typescript for-loop

Answer 1

Answer №1

If you need to loop through an object in pairs, you can make use of the helpful utility known as Object.entries. This function will help prevent any errors that may arise.

type InfoData = {
    title: string,
   quantity: number
}

const item: InfoData = {
    title: 'Chair', quantity: 10
}

for (let [ property, value ] of Object.entries(item)) {
    ...
}

Answer 2

If you need to loop through an object in pairs, you can make use of the helpful utility known as Object.entries. This function will help prevent any errors that may arise.

type InfoData = {
    title: string,
   quantity: number
}

const item: InfoData = {
    title: 'Chair', quantity: 10
}

for (let [ property, value ] of Object.entries(item)) {
    ...
}

Answer 3

Answer №2

const customFunction = (props: CustomProps):void => {
    Object.entries(props).map(([key, value]) => {
        // do more things here
    });
}

I concur with the sentiments expressed by fellow respondents and the feedback provided. The contributions made by others were excellent, and I present this as an alternative approach.

Answer 4

const customFunction = (props: CustomProps):void => {
    Object.entries(props).map(([key, value]) => {
        // do more things here
    });
}

I concur with the sentiments expressed by fellow respondents and the feedback provided. The contributions made by others were excellent, and I present this as an alternative approach.

Answer 5

Answer №3

To make it clear to the interpreter, you can utilize the keyof (object operator). Here is an example of how it can be used:

function customFunction(properties: LabeledProperties):void {
    for (let property in properties) {
        const value = properties[property as keyof LabeledProperties]; 
        // perform additional tasks
    }
}

Answer 6

To make it clear to the interpreter, you can utilize the keyof (object operator). Here is an example of how it can be used:

function customFunction(properties: LabeledProperties):void {
    for (let property in properties) {
        const value = properties[property as keyof LabeledProperties]; 
        // perform additional tasks
    }
}

Error in Typescript index: iterating over properties of a typed object

Answer №1

Answer №2

Answer №3

Similar questions

Effortlessly initiate the consecutive playback on SoundCloud

Is there a way to access the badge hidden behind the collapsible menu in bootstrap 4?

Having trouble with radio button validation in JS?

What is the reason behind the perpetual hiding of the button?

Developing a feature in React Native to retrieve the user's location without properly updating and returning the received data

How can I add color to arrow icons in tabulator group rows?

Is there a way to hide the borders between cells within these divs?

Break free/Reenter a function within another function

"Utilize Selenium to navigate and select a menu option with a

Issue with subscribing to a shared service in Angular 2

What is the best method for creating a loop script within a widget using script?

Trying to filter out repetitive options in an autocomplete box

Refine the Crossfilter dimension according to the specified date range

Using TypeScript, you can pass an object property name as a function argument while ensuring the type is

Unable to load module/controller file from Angular 1 into view/html

Make sure to give an item a little extra attention by highlighting or making it blink after it has

Exploring Angular controller inheritance and the ability to override methods from a superclass

Enhance Select Dropdown in AngularJS with Grouping and Default Selection

increase the selected date in an Angular datepicker by 10 days

issue with integrating promise in angular 4