While working on a TypeScript project, I needed to loop through an object and access its keys and values dynamically. At first, I used a regular for…in loop, but TypeScript code threw an “TS7053” error while looping through an object.
In this tutorial, I’ll explain the different ways to loop through objects in TypeScript and how to avoid common issues like type errors. In the below example, we will use methods like for…in, Object.keys(), Object.values(), and Object.entries() to loop in TypeScript objects.
Why Looping Through Objects is Important in TypeScript
Looping through objects is a common task in JavaScript and TypeScript. Whether you are manipulating data, generating dynamic content, or simply debugging, knowing how to traverse an object is essential. TypeScript, with its strong typing, adds a layer of complexity but also offers more robust solutions.
Methods to Loop Through Objects in TypeScript
Using for…in Loop
The for…in loop is a straightforward way to iterate over the keys of an object. This loop iterates over all enumerable properties of an object.
Example
interface CityPopulation {
NewYork: number;
LosAngeles: number;
Chicago: number;
Houston: number;
}
const cityPopulations: CityPopulation = {
NewYork: 8419000,
LosAngeles: 3980000,
Chicago: 2716000,
Houston: 2328000
};
for (const city in cityPopulations) {
if (cityPopulations.hasOwnProperty(city)) {
console.log(`${city}: ${cityPopulations[city]}`);
}
}Output:
In this example, we loop through the cityPopulations object and log each city along with its population.
Check out: Check if an Object is a String in TypeScript
Using Object.keys()
Object.keys() returns an array of a given object’s own enumerable property names. You can then use a for…of loop or forEach to iterate over these keys.
Example
const cityPopulations = {
NewYork: 8419000,
LosAngeles: 3980000,
Chicago: 2716000,
Houston: 2328000
};
Object.keys(cityPopulations).forEach(city => {
console.log(`${city}: ${cityPopulations[city]}`);
});Output:
This method is useful when you need to work with an array of keys and perform operations on each key.
Using Object.values()
Object.values() returns an array of a given object’s own enumerable property values. This is useful when you are only interested in the values of the object.
Example
const cityPopulations = {
NewYork: 8419000,
LosAngeles: 3980000,
Chicago: 2716000,
Houston: 2328000
};
Object.values(cityPopulations).forEach(population => {
console.log(population);
});Output:
Check out: Check if an Object is a String in TypeScript
Using Object.entries()
Object.entries() returns an array of a given object’s own enumerable string-keyed properties [key, value] pairs. This is particularly useful when you need both keys and values.
Example
const cityPopulations = {
NewYork: 8419000,
LosAngeles: 3980000,
Chicago: 2716000,
Houston: 2328000
};
Object.entries(cityPopulations).forEach(([city, population]) => {
console.log(`${city}: ${population}`);
});Output:
Using for…of With TypeScript Generics
TypeScript generics can be used with for…of Loops to iterate over objects while maintaining type safety.
Example
interface CityPopulation {
[key: string]: number;
}
const cityPopulations: CityPopulation = {
NewYork: 8419000,
LosAngeles: 3980000,
Chicago: 2716000,
Houston: 2328000
};
for (const [city, population] of Object.entries(cityPopulations)) {
console.log(`${city}: ${population}`);
}Output:
Performance Considerations
When choosing a method to loop through objects, consider the performance implications. For instance, Object.keys(), Object.values(), and Object.entries() create arrays, which can be less efficient for large objects. The for…in loop does not create intermediate arrays and might be more efficient in such cases.
Check out: Create an Object from an Interface in TypeScript
Common Pitfalls
Iterating Over Inherited Properties
The for…in loop iterates over all enumerable properties, including those inherited from the prototype chain. Always use hasOwnProperty to filter out inherited properties.
Example
for (const city in cityPopulations) {
if (cityPopulations.hasOwnProperty(city)) {
console.log(`${city}: ${cityPopulations[city]}`);
}
}Output:
Type Safety
TypeScript provides type safety, but it can sometimes be bypassed if not used correctly. Always define interfaces or types for your objects to ensure type safety.
Example
interface CityPopulation {
NewYork: number;
LosAngeles: number;
Chicago: number;
Houston: number;
}
const cityPopulations: CityPopulation = {
NewYork: 8419000,
LosAngeles: 3980000,
Chicago: 2716000,
Houston: 2328000
};Conclusion
In this tutorial, we have learned about various methods to loop through objects in TypeScript, including for…in, Object.keys(), Object.values(), and Object.entries(). Each method has its own advantages and use cases. By understanding these methods and their performance implications, you can choose the most efficient way to iterate over objects in your TypeScript projects.
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
