Literal types and value narrowing in Typescript - Step-by-Step Execution

Concept Flow - Literal types and value narrowing

Declare variable with literal type

↓

Assign specific literal value

↓

Use variable in condition

↓

Execute narrowed

↓

End

Start with a variable having a literal type, then check its value in a condition to narrow its type and run specific code.

Execution Sample

Typescript

let status: "success" | "error" = "success";
if (status === "success") {
  console.log("Operation succeeded");
} else {
  console.log("Operation failed");
}

This code sets a variable to a literal type and uses a condition to narrow its value and print a message.

Execution Table

Step	Variable 'status'	Condition 'status === "success"'	Branch Taken	Output
1	"success"	true	Yes branch	"Operation succeeded"
2	"error"	false	No branch	"Operation failed"

💡 Condition is true at step 1, so 'Yes branch' executes and program ends.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
status	"success"	"success"	"success"	"success"

Key Moments - 2 Insights

Why does the 'if' condition narrow the type of 'status'?

Because the condition checks if 'status' equals the literal "success", TypeScript knows inside the 'if' block 'status' must be exactly "success" (see execution_table step 1).

What happens if 'status' is not "success"?

The 'else' branch runs, meaning 'status' is narrowed to "error" there (see execution_table step 2 where condition is false).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'status' at step 1?

A "error"

B "success"

C undefined

D null

💡 Hint

Check the 'Variable status' column in execution_table row for step 1.

At which step does the condition 'status === "success"' evaluate to false?

A Step 2

B Step 1

C Never

D Both steps

💡 Hint

Look at the 'Condition' column in execution_table for each step.

If we change 'status' initial value to "error", what will happen at step 1?

A Condition is true, 'Yes branch' runs

B Error: type mismatch

C Condition is false, 'No branch' runs

D Program crashes

💡 Hint

Refer to variable_tracker and execution_table logic for condition evaluation.

Concept Snapshot

Literal types hold exact values like "success" or "error".
Type narrowing happens when conditions check these values.
Inside 'if (status === "success")', 'status' is known to be "success".
Else branch means 'status' is the other literal.
This helps TypeScript catch errors and guide code flow.

Full Transcript

This example shows a variable 'status' declared with literal types "success" or "error". It is assigned "success". The 'if' condition checks if 'status' equals "success". When true, the code inside the 'if' runs, printing "Operation succeeded". This narrows the type of 'status' to the literal "success" inside that block. If the condition were false, the 'else' block would run, meaning 'status' is "error" there. The execution table traces these steps, showing the variable value, condition result, branch taken, and output. The variable tracker confirms 'status' stays "success" throughout. Key moments clarify how TypeScript uses these checks to narrow types and why branches run. The quiz tests understanding of variable values and condition results at each step. This helps beginners see how literal types and narrowing work in practice.