How to Iterate Over an Object in TypeScript (with Practical Examples)

Do you want to know how to loop through the properties of an object in TypeScript?

In this tutorial, I’ll walk you through several effective methods to iterate over objects in TypeScript with some real examples. From these examples, you will understand how each method works.

Understanding Object Structure in TypeScript

Before we jump into the methods, let’s quickly review how objects are structured in TypeScript.

Here is an example to help you understand it.

interface StatePopulation {
  [state: string]: number;
}

const populations: StatePopulation = {
  California: 39538223,
  Texas: 29145505,
  Florida: 21538187,
  NewYork: 20201249
};

Here, populations is an object where each key is a state name and each value is the population. This is a common pattern, especially when dealing with data keyed by unique identifiers.

Now, let me show you different methods to iterate over an object in TypeScript. I will use the above object in all the methods.

Check out Arrays of Objects in TypeScript

Method 1: Using for…in Loop

One of the most straightforward ways to iterate over an object in TypeScript is the for...in loop. I use this when I need to access both the key and the value.

for (const state in populations) {
  if (populations.hasOwnProperty(state)) {
    console.log(`${state}: ${populations[state]}`);
  }
}

Here is the exact output in the screenshot below:

Why I like it:

• Simple and direct
• Works with any object

What to watch out for:

• Always use hasOwnProperty to avoid inherited properties.

Check out How to Iterate Over a JSON Object in TypeScript

Method 2: Using Object.keys()

If you want to work only with the object’s own properties, Object.keys() is a great choice. It returns an array of the object’s keys.

Object.keys(populations).forEach((state) => {
  console.log(`${state}: ${populations[state]}`);
});

My tip:

• This method is concise and avoids the need for hasOwnProperty.
• The keys are always strings, so if your object has numeric keys, you may need to convert them.

Method 3: Using Object.entries()

When you want both the key and value in each iteration, Object.entries() is my go-to method. It returns an array of [key, value] pairs.

Object.entries(populations).forEach(([state, population]) => {
  console.log(`${state}: ${population}`);
});

Advantages:

• Clean and readable
• Perfect for destructuring key-value pairs

Read How to Convert TypeScript Objects to JSON

Method 4: Using Object.values()

Sometimes, you only care about the values. In these cases, Object.values() is the most straightforward approach.

Object.values(populations).forEach((population) => {
  console.log(`Population: ${population}`);
});

When to use:

• When the keys aren’t important for your logic

Type Safety Tips When Iterating

One of the things I love about TypeScript is type safety, but it’s easy to lose that when iterating over objects. Here’s how I keep my code type-safe:

Use type assertions:

Object.keys(populations).forEach((state) => {
  const typedState = state as keyof StatePopulation;
  const population = populations[typedState];
  console.log(`${typedState}: ${population}`);
});

Prefer Record for object types:

const stateAbbreviations: Record<string, string> = {
  CA: "California",
  TX: "Texas",
  FL: "Florida",
  NY: "New York"
};

Using Record makes it clear that keys are strings and values are strings.

Summary

In this tutorial, I explained how to iterate over objects in TypeScript using various methods such as for...in, Object.keys(), Object.entries(), or Object.values(), etc. For most situations, I recommend Object.entries() for its clarity and ability to access both keys and values easily.

If you have any questions or want to share your own tips, feel free to leave a comment below.

You may also like the following tutorials:

• Sort Arrays of Objects in TypeScript
• Push Objects into an Array in TypeScript
• Add Property to Object in TypeScript