Author: John Au-Yeung

Sometimes, we want to iterate over array of objects in TypeScript.

In this article, we’ll look at how to iterate over array of objects in TypeScript.

How to iterate over array of objects in TypeScript?

To iterate over array of objects in TypeScript, we can use the for-of loop.

For instance, we write

for (const product of products) {
  console.log(product.productDesc);
}

to loop through the products array.

product is the object being iterated through, so we can get the productDesc property from the object.

Conclusion

To iterate over array of objects in TypeScript, we can use the for-of loop.

Sometimes, we want to fix TypeScript cannot find name window or document.

In this article, we’ll look at how to fix TypeScript cannot find name window or document.

How to fix TypeScript cannot find name window or document?

To fix TypeScript cannot find name window or document, we should add 'dom' to the compilerOptions.lib property in tsconfig.json.

For instance, we write

{
  "compilerOptions": {
    "lib": ["es5", "es6", "dom"]
    //...
  },
  "include": ["./src/**/*"]
}

to add the 'dom' option into the compilerOptions.lib array in tsconfig.json so that the TypeScript compiler knows that the browser side global variables are available in our TypeScript project.

Conclusion

To fix TypeScript cannot find name window or document, we should add 'dom' to the compilerOptions.lib property in tsconfig.json.

Sometimes, we want to import an enum with TypeScript.

In this article, we’ll look at how to import an enum with TypeScript.

How to import an enum with TypeScript?

To import an enum with TypeScript, we need to export it before we can import it.

To export it, we write

export enum EntityStatus {
  New = 0,
  Active = 1,
  Archived = 2,
  Trashed = 3,
  Deleted = 4,
}

to export the EntityStatus enum with the export keyword.

Then we can import it with

import { EntityStatus } from "../../core/enums";

Conclusion

To import an enum with TypeScript, we need to export it before we can import it.

Sometimes, we want to programmatically enumerate an enum type with TypeScript.

In this article, we’ll look at how to programmatically enumerate an enum type with TypeScript.

How to programmatically enumerate an enum type with TypeScript?

To programmatically enumerate an enum type with TypeScript, we can use the Object.keys to get the keys and Object.values to get the values.

For instance, we write

const Color = {
  "RED": "Red",
  "ORANGE": "Orange",
  "YELLOW": "Yellow",
  "GREEN": "Green",
  "BLUE": "Blue",
  "INDIGO": "Indigo",
  "VIOLET": "Violet"
}

const colorKeys = Object.keys(Color) as (keyof typeof Color)[];
const colorValues = Object.values(Color);

to call Object.keys with the Color enum to return the keys on the left side in an array.

Then we call Object.values with Color to return an array with the values on the right side in an array.

Conclusion

To programmatically enumerate an enum type with TypeScript, we can use the Object.keys to get the keys and Object.values to get the values.

Sometimes, we want to use enums inside a class with TypeScript

In this article, we’ll look at how to use enums inside a class with TypeScript.

How to use enums inside a class with TypeScript?

To use enums inside a class with TypeScript, we can put it in the same module as the class.

For instance, we write

enum State {
  STATE_IDLE,
  STATE_LOADING,
  STATE_READY,
  STATE_ERROR,
}

export class Image {
  constructor() {}
  public static readonly State = State;
}

to add the Image class that has the static State variable set to the State enum.

Then we can use it with Image.State.

Conclusion

To use enums inside a class with TypeScript, we can put it in the same module as the class.