Control-flow narrowing

Problem

What becomes confusing, fragile, or impossible without understanding control-flow narrowing? This lesson answers that through explanation, a worked example, two runnable exercises, and a reference solution. No teacher-supplied worksheet is required.

TypeScript added gradual static analysis to JavaScript without replacing its runtime, preserving ecosystem compatibility through erasure.

Concept explanation

Control-flow narrowing belongs to “Inference and narrowing”. control-flow narrowing is learned by comparing readable, constrained, and deliberately clever implementations against same evidence.

For control-flow narrowing, trace concrete input, state transition, output, and failure through a compile-time relationship that constrains JavaScript while leaving runtime values and external data untrusted.

Types constrain possible programs during analysis, then disappear. Runtime values remain JavaScript values and external data remains untrusted. Apply that model to supplied normal, boundary, and failure cases; each case below names its input and expected evidence.

Example bank

Compare normal, boundary, failure, and cross-layer cases. Predict each observation before revealing the explanation.

Worked example

Start from supplied lab.ts. Focus: Solve control-flow narrowing three ways using identical fixture: Model loading/success/error union and exhaustively render each state.

1. Run: npx tsc --strict --noEmit lab.ts
2. Save baseline evidence. Read inferred types, diagnostics, emitted JavaScript, declarations, module traces, and source maps.
3. Boundary case: Run all three implementations against: Parse unknown JSON through runtime guard.
4. Failure case: Force every implementation through: Add new union member and require compiler to expose missing branch.

RESULT
All versions preserve Strict compile passes only with exhaustive handling and runtime validation at boundary.; comparison records code size, predictability, and debugging cost. Starter-level baseline: Strict type checking exits successfully. Changing result.value to a string-only operation produces a compiler diagnostic.

Starter material

Create lab.ts, paste this exact content, then run the command below.

type Observation<T> = { topic: string; value: T; valid: boolean };

function observe<T>(topic: string, value: T): Observation<T> {
  return { topic, value, valid: value !== undefined };
}

const result = observe("control-flow narrowing", 1);
console.log(result.value);

STOP / CLEANUPCompiler exits by itself; no cleanup command required.

Independent exercise

Compare three versions: control-flow narrowing

1. Create second case from blank file: Run all three implementations against: Parse unknown JSON through runtime guard.
2. Then create controlled failure: Force every implementation through: Add new union member and require compiler to expose missing branch.
3. Use tsc · hx LSP · emitted JS · source maps to prove behavior, then repair controlled failure.
4. Compare result against supplied acceptance checks and reference approach before marking complete.

Expected result

• All versions preserve Strict compile passes only with exhaustive handling and runtime validation at boundary.; comparison records code size, predictability, and debugging cost.
• Strict type checking exits successfully. Changing result.value to a string-only operation produces a compiler diagnostic.
• Controlled control-flow narrowing failure produces captured evidence; repair restores stated invariant without hiding error.

Hints

Solution

Attempt both exercises before opening reference approach.