Borislav Hadzhiev
Wed Feb 23 2022·2 min read
Photo by Robson Morgan
To dynamically access an object's property:
keyof typeof obj
as the type of the dynamic key, e.g.
type ObjectKey = keyof typeof obj;
.obj[myVar]
.const obj = { name: 'Tom', country: 'Chile', }; type ObjectKey = keyof typeof obj; const myVar = 'name' as ObjectKey; console.log(obj[myVar]); // 👉️ Tom
The keyof typeof syntax allows us to get a union type of the object's keys.
const obj = { name: 'Tom', country: 'Chile', }; // 👇️ type ObjectKey = "name" | "country" type ObjectKey = keyof typeof obj; const myVar = 'name' as ObjectKey;
myVar
variable will only ever store a string that is equal to one of the keys in the object.Now we can access the object property dynamically.
const obj = { name: 'Tom', country: 'Chile', }; // 👇️ type ObjectKey = "name" | "country" type ObjectKey = keyof typeof obj; const myVar = 'name' as ObjectKey; console.log(obj[myVar]); // 👉️ Tom
This is needed, because TypeScript is not always able to determine the type of a string to be as narrow as necessary.
const obj = { name: 'Tom', country: 'Chile', }; // 👇️ const myVar: string const myVar = 'na' + 'me'; // ⛔️ Error: No index signature with a parameter // of type 'string' was found on type '{ name: string; country: string; } console.log(obj[myVar]); // 👉️ Tom
The type of myVar
is a string in the example above, and not all strings are
properties of the object, so TypeScript informs us that we can't safely access
the property dynamically.
If you try to set the type of myVar
to be a union of the object's keys, you
would still get an error.
const obj = { name: 'Tom', country: 'Chile', }; // 👇️ type ObjectKey = "name" | "country" type ObjectKey = keyof typeof obj; // ⛔️ Error: Type 'string' is not assignable // to type '"name" | "country"'. const myVar: ObjectKey = 'na' + 'me';
The easiest way to get around this is to use a type assertion.
const obj = { name: 'Tom', country: 'Chile', }; // 👇️ type ObjectKey = "name" | "country" type ObjectKey = keyof typeof obj; // 👇️ const myVar: "name" | "country" const myVar = ('na' + 'me') as ObjectKey; console.log(obj[myVar]); // 👉️ Tom
You can also use a type assertion directly in the square brackets.
const obj = { name: 'Tom', country: 'Chile', }; // 👇️ const myVar: string const myVar = 'na' + 'me'; // 👇️ type ObjectKey = "name" | "country" type ObjectKey = keyof typeof obj; console.log(obj[myVar as ObjectKey]); // 👉️ Tom
However, this would mean that you would have to use a type assertion every time you try to dynamically access the property on the object.