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:

TypeScriptCopied!

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.

TypeScriptCopied!

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:

TypeScriptCopied!

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.

TypeScriptCopied!

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.

TypeScriptCopied!

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.

TypeScriptCopied!

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:

TypeScriptCopied!

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.

TypeScriptCopied!

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

Are you experiencing the “Cannot redeclare block-scoped variable” error in TypeScript? This error can occur for two reasons:

1. Using variable names that clash with TypeScript global typings.
2. Redeclaring a variable in the same block scope.

We’ll look at solutions for these possible causes in this article.

Fix for: using variable names that clash with TypeScript global typings

The “Cannot redeclare block-scoped variable” error occurs if you declare a variable with a name that clashes with one declared in TypeScript global typings.

index.ts

// ❌ Cannot re-declare block-scoped variable "name".
const name = 'Coding Beauty';

console.log(name);

To fix the error in this case, convert your file to an ES module, like this:

index.ts

// ✅ variable declared successfully
const name = 'Coding Beauty';

console.log(name); // Coding Beauty

export {};

The export {} statement indicates that the file is an ES module. In TypeScript, any file containing a top-level import or export is considered to be a module.

Without top-level import or export declarations, the file gets treated as a script whose contents are available in the global scope (and to other modules). This is what causes the name clash between our name variable and the name variable declared in TypeScript global typings.

Another way to fix this is to use another name to declare the variable that does not clash with the global typings.

index.ts

// ✅ variable declared successfully
const theName = 'Coding Beauty';

console.log(theName); // Coding Beauty

export {};

Fix for: redeclaring a variable in the same block scope

The “cannot redeclare block-scoped variable” error will also occur if you try to declare a variable using a name previously used in the same block scope.

const language = 'JavaScript';

// ❌ Cannot redeclare block-scoped variable 'language'.
const language = 'PHP';

You can easily fix the error in the case by using a different name for the new variable.

const language = 'JavaScript';

// ✅ variable declared successfully
const language2 = 'PHP';

If you intended to assign a new value to the variable, the proper way to do this is to declare the variable with the let keyword, and change its value without redeclaring it.

// declare with "let" keyword
let language = 'JavaScript';

// reassign without redeclaring
language = 'PHP';

console.log(language); // PHP

var language = 'JavaScript';

// No error thrown
var language = 'PHP';

You can declare a variable with the same name in a nested block. The variable in the nested block is separate from the one declared in the outer scope.

let color = 'red';

if (true) {
  let color = 'yellow';

  console.log(color); // yellow
}

console.log(color); // red

var color = 'red';

if (true) {
  var color = 'yellow';

  console.log(color); // yellow
}

console.log(color); // yellow

It doesn’t have to be an if block, we can do this in any nested block designated with curly braces ({ and }).

let color = 'red';

{
  let color = 'yellow';

  console.log(color); // yellow
}

console.log(color); // red

Fix: use an IIFE

Another way to fix the error is to wrap the code containing the variable with an immediately invoked function expression (IIFE). IIFEs are functions that run as soon as they are defined, and they can help to avoid name clashes that cause this error.

const fruit = 'Apple';

(() => {
  const fruit = 'Banana';

  // ✅ variable declared successfully
  console.log(fruit); // Banana
})();

console.log(fruit); // Apple

This fix also solves the issue of TypeScript global typing clashes we looked at earlier.

index.ts

(() => {
  const name = 'Coding Beauty';

  console.log(name); // Coding Beauty
})();

To fix the “cannot find name ‘require'” error in TypeScript, install the @types/node package into your project by running npm i -D @types/node.

This error can occur when you try to use the Node.js require() function in a TypeScript file.

You can fix it by running the following command in a terminal window at the root directory of your project:

npm i -D @types/node

If the error persists, try adding "node" to the types array in your tsconfig.json file:

tsconfig.json

{
  "compilerOptions": {
    "types": [
      // ... other types
      "node"
    ],
  },
}

declare var require: any;

Are you experiencing the “an implementation cannot be declared in ambient contexts” error in TypeScript? This error can occur when you try to include logic in declaration files, for example:

car.d.ts

declare module 'car' {
  export class Car {
    color: string;
    maxSpeed: number;
    started: boolean;

    // Error: An implementation cannot be declared in ambient contexts
    start() {
      this.started = true;
    }
  }
}

Ambient declarations only exist in the type system and are erased at runtime, so they are not meant to contain implementations. The car module declaration in the example above is only meant to specify type information for a car module that is implemented somewhere else.

To fix this error, remove the implementation:

car.d.ts

declare module 'car' {
  export class Car {
    color: string;
    maxSpeed: number;
    started: boolean;

    start(); // implementation removed
  }
}

Are you experiencing the “cannot use namespace as a type” error in TypeScript?

This error can occur when you try to import types declared as a module. For example:

car.d.ts

declare module 'car' {
  class Car {
    color: string;
    age: number;
    maxSpeed: number;
  }
}

index.ts

import Car from 'car';

// Cannot use namespace 'Car' as a type.
const user: Car = {
  color: 'red',
  age: 2,
  maxSpeed: 120,
};

To fix this error, use an export assignment to specify a default export for the namespace, like this:

car.d.ts

declare module 'car' {
  class Car {
    color: string;
    age: number;
    maxSpeed: number;
  }
  export = Car;
}