In typescript, How to access object key(property) using variable?
for example:
interface Obj {
a: Function;
b: string;
}
let obj: Obj = {
a: function() { return 'aaa'; },
b: 'bbbb'
}
for(let key in obj) {
console.log(obj[key]);
}
but typescript throw below error message:
'TS7017 Element implicitly has an 'any' type because type 'obj' has no index signature'
How to fix it?
You can also do something like this:
const keyTyped = key as keyof typeof Obj;
const value = Obj[keyTyped];
To compile this code with --noImplicitAny, you need to have some kind of type-checked version of Object.keys(obj) function, type-checked in a sense that it's known to return only the names of properties defined in obj.
There is no such function built-in in TypeScript AFAIK, but you can provide your own:
interface Obj {
a: Function;
b: string;
}
let obj: Obj = {
a: function() { return 'aaa'; },
b: 'bbbb'
};
function typedKeys<T>(o: T): (keyof T)[] {
// type cast should be safe because that's what really Object.keys() does
return Object.keys(o) as (keyof T)[];
}
// type-checked dynamic property access
typedKeys(obj).forEach(k => console.log(obj[k]));
// verify that it's indeed typechecked
typedKeys(obj).forEach(k => {
let a: string = obj[k]; // error TS2322: Type 'string | Function'
// is not assignable to type 'string'.
// Type 'Function' is not assignable to type 'string'.
});
I found using keyof to be the easiest solution
const logKey = (key: keyof Obj) => {
console.log(obj[key])
}
for(let key in obj) {
logKey(key)
}
I had the same issue and solved it via the following code:
// interface
export interface IDepartment {
id: string
name: string
}
let fieldName = 'name' as keyof IDepartment
// access value of provided field-name from object
deptObj[fieldName]
You can use extra function for iteration. TS infers type inside function in a more meaningful way:
interface Obj {
a: Function;
b: string;
}
let obj: Obj = {
a: function () { return 'aaa'; },
b: 'bbbb'
}
const iterator = <T extends Obj>(obj: T) => {
for (let key in obj) {
console.log(obj[key]);
}
}
Use
Object.entries(obj).forEach((value, key) => {
console.log(value);
})
Or
Object.entries(obj).map(([key, value]) => {
return `${key} - ${value}`
})
Using Object.keys() + forEach() instead of for...in:
Object.values(obj).forEach((value) => {
console.log(value);
});
This way, TypeScript will be able to infer types properly, without having to do any extra type casting/infer.
I tried your code above as a quick test in WebStorm, and it compiled and ran without error. If you are using a version of Typescript before 2.0, I suggest trying Typescript 2.0 or higher.
