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); // ❌ SyntaxErrorpropKey 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
11 Amazing New JavaScript Features in ES13
This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.
