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, e.g. type ObjectKey = keyof typeof obj;.
Use bracket notation to access the object's property, e.g. obj[myVar].

index.ts

Copied!
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.

index.ts

Copied!
const obj = {
  name: 'Tom',
  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 property dynamically.

index.ts

Copied!
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.

index.ts

Copied!
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.

index.ts

Copied!
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.

index.ts

Copied!
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.

index.ts

Copied!
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.

Dynamically access an Object's Property in TypeScript

Dynamically access an Object's Property in TypeScript #

Borislav Hadzhiev