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

Issue encountered while attempting to save hook arrays: Uncaught TypeError - 'choices' is not able to be

"Mastering the art of passing variables within the index parameter for JavaScript push method

Custom directives are designed to receive arrays as string inputs

JavaScript: Trouble with statement execution

What methods are available to modify the colors in an Apex bar chart?

What is the process for invoking a NodeJS script within a personalized VSCode Extension?

text box with an immobile header

Express.js - display the complete information

The Data from Req.Body Doesn't Appear After Adding Form Fields

Guidelines for declaring types in variable definitions in Typescript

Automatically reload a particular webpage upon closing a pop-up window (using jQuery)

Error message stating 'is not recognized' caused by Angular SharedModule

The ajaxForm function is failing to execute properly and is not providing any error messages

Ways to alter the color of an icon when hovering over it

Enhancing React TypeScript: Accurate typings for Route's location and children attributes

Do you know if there is a setting in prettier that allows line breaks to be preserved?

What sets apart these two JavaScript namespaces?

Working with the React JS Reducer, I am limited to only printing the returned payload and unable to perform any other actions

typescript locate within the union type in the mapping expression

Attempting to fill a collection of JSON entities through a GET call?