While Loop

A while loop in TypeScript is a pre-test control flow statement that repeatedly executes a block of code as long as a specified condition evaluates to a truthy value. Because the condition is evaluated before the loop’s body, the code block may execute zero or more times.

while (condition) {
    // Statements to execute
}

Technical Mechanics

• Condition Evaluation: The condition is an expression evaluated prior to every iteration. TypeScript relies on standard JavaScript truthy/falsy coercion for this evaluation. However, in strict TypeScript codebases (especially those utilizing strictBooleanExpressions via linters), this expression is typically constrained to evaluate strictly to a boolean type.
• Execution Block: The statements enclosed in the curly braces {} form a local lexical scope. Variables declared with let or const inside this block are re-created on each iteration and cannot be accessed outside the loop.
• Termination: The loop terminates naturally when the condition evaluates to false. The state of the variables evaluated in the condition must be mutated within the loop body; otherwise, the loop becomes infinite.

Control Flow Modifiers

You can alter the standard execution phase of a while loop using specific control flow keywords:

• break: Immediately terminates the loop entirely. Execution jumps to the first statement following the loop block.
• continue: Immediately halts the current iteration. Execution jumps back to the top of the loop to re-evaluate the condition.

Syntax Demonstration

let index: number = 0;
let isActive: boolean = true;

while (isActive && index < 10) {
    index++;

    if (index % 2 === 0) {
        continue; // Bypasses the remaining block, re-evaluates condition
    }

    if (index === 7) {
        break; // Terminates the loop entirely
    }
}

Type Narrowing within While Loops

TypeScript’s control flow analysis applies inside while loops. If a union type is evaluated in the condition or narrowed via type guards within the loop body, the TypeScript compiler will correctly infer the narrowed type for the remainder of that specific iteration.

let data: string | null = "initial";

while (data !== null) {
    // TypeScript infers 'data' is strictly 'string' here
    console.log(data.length); 
    
    // Mutation that could change the type evaluation on the next pass
    data = Math.random() > 0.5 ? "next" : null; 
}

Master TypeScript with Deep Grasping Methodology!

Learn More