Dynamically access an Object's Property in TypeScript

# Dynamically access an Object's Property in TypeScript

To dynamically access an object's property:

Use keyof typeof obj as the type of the dynamic key.
Use bracket notation to access the object's property, e.g. obj[myVar].

index.ts

Copied!
const obj = {
  name: 'Bobby Hadz',
  country: 'Chile',
};

type ObjectKey = keyof typeof obj;

const myVar = 'name' as ObjectKey;

console.log(obj[myVar]); // 👉️ Bobby Hadz

dynamically access object property

The code for this article is available on GitHub

The keyof typeof syntax allows us to get a union type of the object's keys.

index.ts

Copied!
const obj = {
  name: 'Bobby Hadz',
  country: 'Chile',
};

// 👇️ type ObjectKey = "name" | "country"
type ObjectKey = keyof typeof obj;

const myVar = 'name' as ObjectKey;

This way, we can inform TypeScript that the 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's property dynamically.

index.ts

Copied!
const obj = {
  name: 'Bobby Hadz',
  country: 'Chile',
};

// 👇️ type ObjectKey = "name" | "country"
type ObjectKey = keyof typeof obj;

const myVar = 'name' as ObjectKey;

console.log(obj[myVar]); // 👉️ Bobby Hadz

This is needed because TypeScript is not always able to determine the type of a string to be as narrow as necessary.

If you try to set the type of the variable to be a union of the object's keys, you would get an error.

index.ts

Copied!
const obj = {
  name: 'Bobby hadz',
  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';

I've also written an article on how to get an object's key by value in TS.

# Using a type assertion to dynamically access an object property

The easiest way to get around this is to use a type assertion.

index.ts

Copied!
const obj = {
  name: 'Bobby Hadz',
  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]); // 👉️ Bobby Hadz

using type assertion to dynamically access object property

The code for this article is available on GitHub

You can also use a type assertion directly in the square brackets.

index.ts

Copied!
const obj = {
  name: 'Bobby Hadz',
  country: 'Chile',
};

// 👇️ const myVar: string
const myVar = 'na' + 'me';

// 👇️ type ObjectKey = "name" | "country"
type ObjectKey = keyof typeof obj;

console.log(obj[myVar as ObjectKey]); // 👉️ Bobby Hadz

use type assertion directly in the square brackets

However, with this approach, you have to use a type assertion every time you try to dynamically access the property on the object.

I've also written a guide on How to add a property to an object.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Dynamically access an Object's Property in TypeScript