How to Get an Object Value By Key in TypeScript

Tari Ibaba
Last updated on January 12, 2023
How to Get an Object Value By Key in TypeScript

You can easily get an object's value by a key in Typescript using bracket notation, i.e., obj['key'], obj[myVar], etc. If the key exists, you will get the corresponding value back.

For example:

type Car = {
  name: string;
  maxSpeed: number;
  color: string;
};

const car: Car = {
  name: 'CB Flash',
  maxSpeed: 200,
  color: 'blue',
};

console.log(car['name']); // CB Flash

// Dot notation
console.log(car.name); // CB Flash

// Get value by variable key
const prop = 'name';
console.log(car[prop]); // CB Flash

// Computed property key
const val = car[3 > 1 ? 'name' : 'maxSpeed']
console.log(val) // CB Flash

Dot notation property access

There are two ways to get an object's value by a property key in TypeScript: dot notation and bracket notation.

In dot notation, we access an object value with the obj.propKey syntax.

type Car = {
  name: string;
  maxSpeed: number;
  color: string;
};

const car = {
  name: 'CB Flash',
  maxSpeed: 200,
  color: 'blue',
};

console.log(car.name); // CB Flash

console.log(car.maxSpeed); // 200

console.log(car.color); // blue

With the obj.propKey syntax, the propKey must be a valid TypeScript identifier. Otherwise, a syntax error will be thrown:

type Car = { [propKey: string]: string };

const car: Car = {};

car.100 = 'go faster'; // ❌ SyntaxError

console.log(car.100); // ❌ SyntaxError

propKey can also be a reserved keyword, like let, var, async, etc.

type Car = { [propKey: string]: string };

const car: Car = {};

car.let = 'works';

car.await = 'works too';

console.log(car.let); // works

console.log(car.await); // works too

Bracket notation property access

In bracket notation, we access the property value with the obj[expression] syntax. The expression should evaluate to a string or Symbol that represent the property's key.

type Car = {
  name: string;
  maxSpeed: number;
  color: string;
};

const car: Car = {
  name: 'CB Flash',
  maxSpeed: 200,
  color: 'blue',
};

console.log(car['name']); // CB Flash

console.log(car['maxSpeed']); // 200

console.log(car['color']); // blue

Unlike dot notation, with bracket notation, we can access keys that are not valid TypeScript identifiers, like numbers and keys containing spaces.

type Car = { [propKey: string]: string };

const car: Car = {};

car['100'] = 'go faster';

car['year produced'] = 2022;

console.log(car['100']); // go faster

console.log(car['year produced']); // 2022

Computed property names

The expression we put in-between the brackets can be as complex as possible, as long it evaluates to a string or Symbol.

For example, we can put a ternary expression in-between the brackets:

type Car = {
  name: string;
  maxSpeed: number;
  color: string;
};

const car: Car = {
  name: 'CB Flash',
  maxSpeed: 200,
  color: 'blue',
};

const num = 3;

const val = car[num > 1 ? 'name' : 'maxSpeed'];

console.log(val); // CB Flash

Note: If the expression to the left of the ? is truthy, the ternary operator returns the value to the left. Otherwise, it returns the value to the right.

The ternary expression evaluates to the 'name' key, so the corresponding property value is returned.

You can also this computed property names approach to set a new property on a object.

type Car = {
  [propKey: string]: string | number;
};

const car: Car = {};

const num = 7;

car[num > 10 ? 'name' : 'maxSpeed'] = 500;

console.log(car['name']); // undefined

console.log(car['maxSpeed']); // 500
Coding Beauty Assistant logo

Try Coding Beauty AI Assistant for VS Code

Meet the new intelligent assistant: tailored to optimize your work efficiency with lightning-fast code completions, intuitive AI chat + web search, reliable human expert help, and more.

See also