Using TypeScript, leverage bracket notation to access a property of an object using a variable

Question

Using TypeScript, leverage bracket notation to access a property of an object using a variable

I am working with an object that has an interface and I am interested in accessing values dynamically using property keys.

const userData: IUser = {
    username: "test",
    namespace: "test",
    password: "test"
}

Object.keys(userData).forEach(property=>{
    // Issue: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'IUser'.
    console.log(userData[property]);
})

// This works
console.log(userData["username"]);

// This also works
const key = "username";
console.log(userData[key]);

Additionaly,

userData.hasOwnProperty(property)

does not solve the issue.

typescript

Answer 1

Answer №1

When using Object.keys, we are limited by the fact that it does not allow us to pass a generic type. The return type ends up being string[]. If we desire a type of [keyof IUser], we can achieve this by performing a type cast.

const keys: [keyof IUser] = Object.keys(tmpUser) as [keyof IUser]
keys.forEach((property)=>{
    console.log(tmpUser[property]);
})

However, this workaround is unnecessary. To easily access both the key and value of an object, you can simply use

Object.entries(tmpUser).forEach(([key,value])=>{
   
})

Answer 2

When using Object.keys, we are limited by the fact that it does not allow us to pass a generic type. The return type ends up being string[]. If we desire a type of [keyof IUser], we can achieve this by performing a type cast.

const keys: [keyof IUser] = Object.keys(tmpUser) as [keyof IUser]
keys.forEach((property)=>{
    console.log(tmpUser[property]);
})

However, this workaround is unnecessary. To easily access both the key and value of an object, you can simply use

Object.entries(tmpUser).forEach(([key,value])=>{
   
})

Answer 3

Answer №2

To define the data type for the keys in IUser as string (or a combination like string | number), you can use the following code:

interface IUser extends Record<string, any> {
    username: string
    namespace: string
    password: string
}

Answer 4

To define the data type for the keys in IUser as string (or a combination like string | number), you can use the following code:

interface IUser extends Record<string, any> {
    username: string
    namespace: string
    password: string
}

Answer 5

Answer №3

Here's another potential solution to consider. Assuming you have a function called process that takes an object and performs some action on it:


const process = <O extends { [key: string]: any }>(object: O) => {
    Object
        .keys(object)
        .forEach(prop => {
            // Now the issue is resolved
            console.log(object[prop]);
        });
}

process(tmpUser);

Answer 6

Here's another potential solution to consider. Assuming you have a function called process that takes an object and performs some action on it:


const process = <O extends { [key: string]: any }>(object: O) => {
    Object
        .keys(object)
        .forEach(prop => {
            // Now the issue is resolved
            console.log(object[prop]);
        });
}

process(tmpUser);

Using TypeScript, leverage bracket notation to access a property of an object using a variable

Answer №1

Answer №2

Answer №3

Similar questions

Issue with Typescript in Material-UI's CardActionArea component attribute

How can I use a string variable in Angular 2 to create a dynamic template URL

Issue with validating the date picker when updating user information

Looking to transform a timestamp such as "2021-07-18T9:33:58.000Z" into a more readable format like 18th July for the date or 9:33 am for the time using Angular?

Puppeteer: implementing wait timeout is crucial to successfully handle Auth0 login process

Issues with using hooks in a remote module in Webpack 5 module federation

Changes in tabs are discarded when switching between them within Material UI Tabs

Remove a record from Angular 2 Firebase collection

Having an issue with my code in angular 12 where I am unable to successfully call an API to retrieve a token, and then pass that token to another API for further processing

Using Typescript with AWS Lambda can sometimes be a bit tricky. For example, when trying to invoke your Lambda function locally using "sam local invoke", you might encounter an error stating

Guide to implementing ES2022 modules within an extension

`Angular 6 and the expiration of Jwt tokens`

React-query: When looping through useMutation, only the data from the last request can be accessed

I possess a JSON array object and need to identify and extract the array objects that contain a specific child node

Exploring properties of nested elements in React

Using HTTP POST to subscribe and implementing a try-catch block

Angular 5 error: The property you are trying to access is not defined in

Modify the standard localStorage format

Error message: "Property 'item' is not found within type 'P' - The property is inaccessible in the higher order component even though it is included in the props."

What is the most effective way to send messages from Typescript to C#?