Access object property using variable in bracket notation in TypeScript

Question

I have object with interface and I would like to dynamically access values by property key.

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

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

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

// works
const someKey = "username";
console.log(tmpUser[someKey]);

also tmpUser.hasOwnProperty(property) doesn't help neither.

instead of forEach(property => , try forEach((property: keyof IUser) => — user13258211
– user13258211, Commented Jun 19, 2020 at 13:01
@MikeS. that won't work because Object.keys(tmpUser) is already string[], so forEach expects a callback whose first parameter is string: Type 'string' is not assignable to type '"username" | "namespace" | "password"'. — jonrsharpe
– jonrsharpe, Commented Jun 19, 2020 at 13:04

Jax-p · Accepted Answer · 2020-07-01 09:51:56Z

2

+50

Because Object.keys does not allow use to pass a generic type, its return type is string[], if we want to have type [keyof IUser] we can cast it

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

BUT: It's is unnecessary. If you want to get key and value of that key you can simply use

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

edited Jul 1, 2020 at 9:51

Jax-p

8,7946 gold badges33 silver badges68 bronze badges

answered Jun 30, 2020 at 11:02

Tony Nguyen

3,49814 silver badges20 bronze badges

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

Comments

Michal · Accepted Answer · 2020-06-30 11:39:59Z

2

You can specify that the IUser keys will be of type string (or if you want e. g. string | number):

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

answered Jun 30, 2020 at 11:39

Michal

2,1013 gold badges31 silver badges66 bronze badges

Comments

Kousha · Accepted Answer · 2020-06-30 19:55:07Z

0

Throwing another solution here, especially since I'm assuming you'll have some kind of a process function that takes in an object and does something with it:


const process = <O extends { [key: string]: any }>(object: O) => {
    Object
        .keys(object)
        .forEach(prop => {
            // No longer complains
            console.log(object[prop]);
        });
}

process(tmpUser);

answered Jun 30, 2020 at 19:55

Kousha

36.7k60 gold badges191 silver badges318 bronze badges

Collectives™ on Stack Overflow

Access object property using variable in bracket notation in TypeScript

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