Welcome to the world of iterations and loops. Let's dive into TypeScript's while loops! While loops are essential in programming because they allow code to be executed repeatedly while a certain condition remains true. They function similarly to an action that you repeat until a certain condition changes; for instance, cleaning a room until it's no longer messy. The while loop runs as long as the condition is met.

while loops in TypeScript are control flow statements that allow a block of code to be executed repeatedly while a given condition remains true. For instance, consider a situation where you keep playing outside while it's sunny. Here's what a while loop in TypeScript might look like:

TypeScript
Copy to clipboard
1let counter: number = 0; // Initialize with 0
2while (counter < 5) { // Loop while counter is less than 5
3    console.log(counter); // Print the counter
4    counter++; // Increment the counter by 1 after each loop iteration
5}
6/*
7Prints:
80
91
102
113
124
13*/

In this example, we initialize a counter with an initial value of 0. The current counter value is then logged as long as its value is less than 5. Once the value reaches 5 or higher, the loop execution stops.

A while loop in TypeScript comprises a condition and a body of code. If the condition is true, the code block (body) within the while statement is executed.

TypeScript
Copy to clipboard
1while (condition) { // Loop continues while the condition is true
2    // block of code
3}

Imagine the need to run a countdown from 5 to 1. This can conveniently be achieved using a while loop as follows:

TypeScript
Copy to clipboard
1let number: number = 5; // Initialize with 5
2
3while (number >= 1) { // While number is at least 1
4    console.log('Number is:', number); // Print the number
5    number--; // Decrease the number by one after each iteration
6}
7/*
8Prints:
9Number is: 5
10Number is: 4
11Number is: 3
12Number is: 2
13Number is: 1
14*/

while loops in TypeScript can use compound conditions utilizing && (and) or || (or). For example, consider a scenario where you're saving up for a bike and want to stop saving once you hit your goal, or when winter starts, whichever comes first:

TypeScript
Copy to clipboard
1let savings: number = 0; // Starting savings
2let isWinter: boolean = false; // Identifying the start of winter
3
4while (savings < 100 && !isWinter) { // Continue while savings is less than 100 and it's not winter
5    savings += 10; // Increase savings by 10
6    console.log('Savings:', savings);
7
8    // Simulate the changing of seasons
9    if (savings === 50) { // When savings equals 50, winter starts
10        isWinter = true;
11    }
12}
13/*
14Prints:
15Savings: 10
16Savings: 20
17Savings: 30
18Savings: 40
19Savings: 50
20*/

It's crucial to avoid creating an infinite loop in TypeScript, where the condition always remains true, and thereby the loop never ends. In the example below, the increment step is missing, resulting in an infinite loop:

TypeScript
Copy to clipboard
1let counter: number = 0; // Initial counter value
2
3while(counter < 5) { // Counter is always less than 5
4    console.log(counter);
5    // counter++;
6    // Counter isn't increasing (commented), thus creating an infinite loop
7}

Fantastic! You've now learned to use while loops, understood their syntax, and applied them to real-world scenarios. Now it's time to complete some hands-on exercises to solidify these skills. Brace yourself for a fascinating journey into the TypeScript world! Be prepared: adventures lie ahead!