TypeScript Iterators - “for” Loop Statement

The use of for looping in JavaScript is pretty easy and straight forward but in TypeScript there is some nuances that you need to know. I got stuck find a way to better understand and type in loops in TypeScript. Hope it helps you as well. Let’s check it out.

How to write a for loop in TypeScript

# Simple for loop

To use for you need an object that have correct implemented or built-in Symbol.iterator for like Array, Map, Set, String, Int32Array, Uint32Array to iterate over.

const fruitsArray = ["apple", "orange", "grape"]
for (let fruit of fruitsArray) {
    console.log(fruit); // "apple", "orange", "grape"
}

# for..of vs. for..in statements

Both for..of and for..in statements iterate over objects with Symbol.iterator implemented. The values iterated on are different though, for..in returns a list of keys on the object being iterated, whereas for..of returns a list of values of the numeric properties of the object being iterated.

Example with a list:

for (let fruit of fruitsArray) {
    console.log(fruit); // "apple", "orange", "grape"
}
for (let fruit in fruitsArray) {
    console.log(fruit); // "0", "1", "2"
}

Example with an object:

const person = { "name": "joao", "age": 20, "isAthlete": true}
for (let prop of person) {
    console.log(prop); // Type '{ name: string; age: number; isAthlete: boolean; }' must have a '[Symbol.iterator]()' method that returns an iterator
}
for (let prop in person) {
    console.log(prop); // "name", "age", "isAthelete"
}

for..of is for list type or you can implement Symbol.iterator that I will explain in the next article.

Alright…but if we have a class and want to iterate with for..in over that object?

class Person {
    name:string
    age:number
    isAthlete:boolean
    construct(name:string, age:number, isAthlete:boolean) {
        this.name = name
        this.age = age
        this.isAthlete = isAthlete
    }
}
const person = new Person("João", 20, true)
for (let prop in person) {
    console.log(prop); // "name", "age", "isAthelete"
}

Let’s suppose you need to iterate to get values from a prop in an object

for (let prop in person) {
    console.log(person[prop]); 
}
// Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Person'.
      No index signature with a parameter of type 'string' was found on type 'Person'.

What happened? When you do let prop the for loop set type as string. In TypeScript class the props are of type Person. So let’s fix the code to iterate over it and get the values.

for (let prop in person) {
    const key= prop as keyof Person
    console.log(person[key]); // "João", 20, true
}

Conclusion

To iterate over TypeScript object and get values from properties you need to set the proper type. I hope it could help to better understand a little bit of loops in TypeScript.