In this form, the loop declares a variable named elem, which TypeScript infers has a type of string as that is the type of the array elements. The loop then automatically repeats once for every element of myArray, with the loop variable elem set the value of the current element. So this loop will also log a message with each element to the console.
This type of loop is a bit more convenient to write, as you don't need to include comparison or increment parts of the loop. However note it does not directly provide a way to identify the current index - it only gives the actual values. So in some cases if you still need to know the array index in the loop, such as to read from two same-sized arrays simultaneously, it can be more convenient to use the previous kind of for loop.
For-of loops also work with other things in TypeScript, and in fact the details of how they work goes in to a fairly complex area of TypeScript known as iterators. We won't go in to that here, but it's worth knowing that for-of loops are another way to do something for every element in an array.
Adding and removing elements
TypeScript provides lots of ways to alter arrays, including adding, removing and replacing elements. In the interest of simplicity, we'll just cover two here.
You can use the built-in array push() method to add a new element to the end of an array. Let's also use some emojis for strings!
let myArray = ["😀", "👽", "👾"];
// Add a new element at the end of the array
myArray.push("🤖")
// Show the array in the console
// It now has: 😀, 👽, 👾, 🤖
console.log(myArray);
Once an element is added, the length property automatically increases to 4 to reflect the new size of the array.
In TypeScript if you want to start with an empty array and then push to it, it's important to note that TypeScript will infer the type of an empty array as any[]. That means the type of elements is any and so you can add anything you like to the array.
// Create an empty array.
// TypeScript infers the type as any[].
let myArray = [];
// Both types OK
myArray.push("😀");
myArray.push(5);
console.log("myArray is: ", myArray);
As the main purpose of TypeScript is to use specific types, you should generally avoid doing this. Instead in this case you can use a specific type annotation for the variable, enforcing that it can only store the intended type - in this case strings.
// Create an empty array.
// Use an explicit type to enforce string elements.
let myArray: string[] = [];
myArray.push("😀");
// This is now an error: the array contains strings
// and does not allow numbers.
myArray.push(5);
The second array method we'll cover here is the pop() method. This removes the last element from the end of the array, and also returns the value of the element it removed.
let myArray = ["😀", "👽", "👾"];
// Remove element from end of array
let removedElem = myArray.pop();
// Show the array in the console
// It now has: 😀, 👽
console.log("The array has: ", myArray);
// Show the removed element in the console (👾)
console.log(`The removed element is: ${removedElem}`);
After removing an element the array length property automatically decreases to 2.
A few more details
Back in part 8, we covered how strings and numbers are passed by value, but objects are passed by reference. Arrays are also passed by reference in TypeScript. (In fact, as noted previously, in TypeScript arrays are special kinds of objects.)
Arrays are a type of collection, which is the name given for data structures that store multiple values. Arrays are also an ordered collection, since elements have a clear order and you can tell if one element comes before or after another - and the order can be changed (although we didn't cover that here). This is in contrast to other data structures that may not have a specific ordering or cannot be re-ordered.
Arrays have a lot more features in TypeScript. They're another key fundamental part of programming, and so have a wide range of capabilities that make them flexible and useful for lots of tasks. We'll come back to a few more of these features later in this guide. However we've covered the basics of arrays, and to keep things simple we'll move along.