Check out our Angular Book Series.

Loops and Arrays in TypeScript - Part 5

I'm writing a longer series of articles about Typescript. This will be extra material to support my upcoming Angular 4 book. This is the fifth part of that series. Check out part 1, part 2, Part 3, and Part 4.

This entry will focus on loops and arrays. We'll create an array of strings, and then loop over them with our echo function to welcome multiple people in our HTML page.

Create an Array

The first step is to create an array. You can use this sytnax:


let personArray : string[] = ["Jeffry", "Tom", "John"];

This creates a variable just like other variables we had seen. The key differentiator is that after the type, I added square brackets. This is what tells the compiler we are creating an array of strings. You can define arrays with any of the native types, such as numbers or Boolean, or with your own custom types.

For-in Loop

The very first time I wanted to loop over an array, I used a for-in loop, like this:


let bodyString : string = "";
for (let person in personArray){
bodyString += echo(messageIntro + " " + person + "<br/>");
}
document.body.innerHTML = bodyString ;

I had used for-in loops in other languages, such as ActionScript so this was my natural impulse.

Let's look at the results:

Instead of outputting the data in the array, it outputted the index. The proper way to use a for-in loop in TypeScript would be like this:


for (let person in personArray){
bodyString += echo(messageIntro + " " + personArray[person] + "<br/>");
}

This isn't much different than a generic for loop that uses a counter, although the syntax is a bit nicer:

All version of ECMAScript after 2015 support for-in loops the same way that TypeScript does. This is supported by most browsers and in fact that generated JS Code uses for-in loops:


for (var person in personArray) {
bodyString += echo(messageIntro + " " + person + "<br/>");
}

But, this result wasn't quite what I was after. Thankfully TypeScript includes another option, the for-of loop.

For-Of Loops

A for-of loop makes one syntactical difference than a for-in loop. Instead of using the keyword in, it uses the keyword on:


for (let person of personArray){
bodyString += echo(messageIntro + " " + person + "<br/>");
}

This type of loop the loop counter, person, will match the value of the personArray instead of the index. After the compilation this is turned into a for loop with an explicit counter:


for (var _i = 0, personArray_1 = personArray; _i < personArray_1.length; _i++) {
var person = personArray_1[_i];
bodyString += echo(messageIntro + " " + person + "<br/>");
}

Compile this code and load it in the browser to see the expected results:

Looping in TypeScript is not much different than looping in other languages.

The next entry in this series will focus on creating classes.

Keep up to date by reading DotComIt's Monthly Technical Newsletter

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.