Truthiness narrowing in Typescript - Step-by-Step Execution

Concept Flow - Truthiness narrowing

Start with variable of type: string | null | undefined

↓

Check if variable is truthy

↓

Variable narrowed to string

↓

Use variable as string

↓

End

Start with a variable that can be string, null, or undefined. Check if it is truthy to narrow its type to string. Otherwise, handle falsy cases including null or undefined.

Execution Sample

Typescript

function greet(name: string | null | undefined) {
  if (name) {
    console.log(`Hello, ${name.toUpperCase()}`);
  } else {
    console.log("Hello, guest");
  }
}

This code checks if 'name' is truthy to safely use it as a string; otherwise, it greets a guest.

Execution Table

Step	Variable 'name'	Condition 'if(name)'	Type Narrowed To	Action	Output
1	"Alice"	true	string	Execute if block	Hello, ALICE
2	null	false	string | null | undefined	Execute else block	Hello, guest
3	undefined	false	string | null | undefined	Execute else block	Hello, guest
4	""	false	string | null | undefined	Execute else block	Hello, guest
Exit	-	-	-	End of function	-

💡 Execution stops after handling all cases of 'name' with truthiness check.

Variable Tracker

Variable 'name'	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
name	"Alice" / null / undefined / ""	"Alice"	null	undefined	""	varies per call

Key Moments - 3 Insights

Why does an empty string ('') cause the else block to run even though it's a string?

Because '' is falsy in JavaScript/TypeScript, so the condition 'if(name)' is false, taking the else branch (type still string | null | undefined), as shown in execution_table row 4.

How does the type narrow from 'string | null | undefined' to just 'string' inside the if block?

The condition 'if(name)' checks truthiness, so inside the if block TypeScript knows 'name' cannot be null or undefined, narrowing it to 'string' as shown in execution_table row 1.

What happens if we try to use 'name.toUpperCase()' without the if check?

It would cause a runtime error if 'name' is null or undefined, but the if check prevents this by ensuring 'name' is truthy before calling 'toUpperCase()', as shown in the code and execution_table.

Visual Quiz - 3 Questions

Look at the execution table, what is the type of 'name' inside the if block when 'name' is "Alice"?

A undefined

B string

C null

D string | null | undefined

💡 Hint

Check execution_table row 1 under 'Type Narrowed To' column.

At which step does the condition 'if(name)' evaluate to false?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Condition' column in execution_table rows 2, 3, and 4.

If we remove the if check, what is the risk when 'name' is null?

A TypeScript will automatically fix it

B No risk, code runs fine

C Runtime error when calling toUpperCase()

D Output will be 'Hello, guest'

💡 Hint

Refer to key_moments explanation about using 'name.toUpperCase()' without checking.

Concept Snapshot

Truthiness narrowing in TypeScript:
- Use 'if(variable)' to check if variable is truthy
- Narrows type from 'T | null | undefined' to 'T'
- Prevents runtime errors by ensuring variable is not null/undefined
- Falsy values: null, undefined, '', 0, false
- Use else block to handle falsy cases safely

Full Transcript

This example shows how TypeScript uses truthiness narrowing to safely work with variables that can be string, null, or undefined. The function greet takes a variable 'name' which might be a string or null or undefined. The if statement checks if 'name' is truthy. If yes, TypeScript narrows the type to string, so we can safely call toUpperCase() on it. If not, the else block runs, greeting a guest. The execution table shows different inputs and how the condition evaluates, what type narrowing happens, and what output is produced. Key moments clarify why empty string is falsy and how narrowing prevents errors. The quiz tests understanding of type narrowing and truthiness checks. This helps beginners see how TypeScript uses runtime checks to narrow types and avoid errors.