In this tutorial, I will explain how to use loops in TypeScript to execute a block of code multiple times. Loops in any programming allow you to perform repetitive tasks efficiently. We will see different types of loops available in TypeScript, including for
, for...of
, for...in
, and forEach
loops with some examples.
for Loop in TypeScript
The for
loop is one of the most commonly used loops in TypeScript. It allows you to execute a block of code a specified number of times. Here is the basic syntax of a for
loop:
for (let i = 0; i < 10; i++) {
// Code to be executed
}
Example: Iterating Over a List of Cities
Let’s say we want to print the names of the top 5 most populous cities in the USA. We can use a for
loop to achieve this:
const cities = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"];
for (let i = 0; i < cities.length; i++) {
console.log(cities[i]);
}
In this example, the loop runs from i = 0
to i < cities.length
, printing each city name.
Here is the exact output in the screenshot below:

Check out How to Use For Loop Range in TypeScript?
for…of Loop
The for...of
loop in TypeScript is used to iterate over iterable objects like arrays, strings, maps, and sets. It is more concise and easier to read than a traditional for
loop.
Example: Iterating Over an Array of States
Consider an array of US states:
const states = ["California", "Texas", "Florida", "New York", "Pennsylvania"];
for (const state of states) {
console.log(state);
}
This loop will print each state in the array.
Read How to Use for…in Loops in TypeScript?
for…in Loop
The for...in
loop is used to iterate over the keys of an object. It is particularly useful when you need to access both the key and the value of an object.
Example: Iterating Over an Object of State Populations
Suppose we have an object that holds the population of different states:
const statePopulations: { [key: string]: number } = {
California: 39538223,
Texas: 29145505,
Florida: 21538187,
"New York": 20201249,
Pennsylvania: 13002700
};
for (const state in statePopulations) {
console.log(`${state}: ${statePopulations[state as keyof typeof statePopulations]}`);
}
This loop will print each state along with its population.
Here is the exact output in the screenshot below:

Read How to Use for…of Loops in TypeScript?
forEach Method
The forEach
method is a higher-order function available on arrays. It allows you to execute a function for each element in the array.
Example: Iterating Over an Array of National Parks
Let’s iterate over an array of famous national parks in the USA:
const nationalParks = ["Yellowstone", "Yosemite", "Grand Canyon", "Zion", "Rocky Mountain"];
nationalParks.forEach(park => {
console.log(park);
});
This method provides a clean and readable way to iterate over array elements.
Conclusion
In this tutorial, we covered various ways to use loops in TypeScript to execute code multiple times. We discussed the for
loop, for...of
loop, for...in
loop, and forEach
method with some examples.
You may also like:
- How to Use the TypeScript forEach Loop with Index?
- How to Break Out of a forEach Loop in TypeScript?
I’m Bijay Kumar Sahoo, and I am honored to be awarded the Microsoft MVP. With over 18 years of experience in the IT industry, I got a chance to work on SharePoint Framework (SPFx) development, TypeScript, React, JavaScript, etc. My journey has taken me through esteemed organizations such as TCS, HP, and KPIT, where I have honed my skills and expanded my expertise. Check out more about me here.