Why type narrowing is needed in Typescript - Visual Breakdown

Concept Flow - Why type narrowing is needed

Start: variable with union type

↓

Check type with condition

↓

Use narrowed type

↓

End

We start with a variable that can be multiple types. We check its type using a condition. If the check passes, we safely use the variable as the narrowed type. Otherwise, we handle the other type.

Execution Sample

Typescript

function printLength(x: string | number) {
  if (typeof x === 'string') {
    console.log(x.length);
  } else {
    console.log(x.toFixed(2));
  }
}

This function checks if x is a string or number, then safely uses string or number methods accordingly.

Execution Table

Step	Variable x	Condition	Condition Result	Action	Output
1	'hello'	typeof x === 'string'	true	Use x.length	5
2	42	typeof x === 'string'	false	Use x.toFixed(2)	42.00
3	true	typeof x === 'string'	false	Error (not string or number)	Error (not number)

💡 Execution stops after handling all cases or error if type is unexpected

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3
x	string | number | boolean	string	number	boolean

Key Moments - 2 Insights

Why can't we call x.length directly without checking the type?

Because x can be a number or string, and numbers don't have length. The execution_table row 2 shows that if x is a number, calling length would cause an error.

What happens if we don't handle the else case?

If we skip the else, the code might try to use string methods on numbers or vice versa, causing runtime errors. The execution_table row 3 shows an error when type is unexpected.

Visual Quiz - 3 Questions

Look at the execution_table, what is the output when x is 'hello' at step 1?

A 42.00

B Error

C 5

D undefined

💡 Hint

Check the Output column in row 1 of execution_table

At which step does the condition typeof x === 'string' evaluate to false?

A Step 1

B Step 2

C Step 3

D None

💡 Hint

Look at the Condition Result column in execution_table rows 2 and 3

If we remove the else block, what will happen when x is 42?

A It will print 42.00

B It will do nothing

C It will cause a runtime error

D It will print 2

💡 Hint

Without else, the number case is not handled, so no output occurs for x=42

Concept Snapshot

Type narrowing lets TypeScript know the exact type inside a condition.
Use conditions like typeof or instanceof to check types.
Inside the true branch, you can safely use methods of the narrowed type.
Without narrowing, TypeScript warns about unsafe operations.
Narrowing prevents runtime errors by ensuring correct type usage.

Full Transcript

Type narrowing is needed because variables can have multiple types, called union types. When you want to use a method or property specific to one type, you must first check the variable's type. For example, a variable x can be a string or number. Strings have a length property, but numbers do not. So, before calling x.length, you check if x is a string using typeof x === 'string'. If true, you safely use x.length. Otherwise, you handle the number case, like calling x.toFixed(2). This prevents errors and helps TypeScript understand your code better.

Practice

1. Why do we need type narrowing in TypeScript when a variable can have multiple types?

easy

A. To tell TypeScript the exact type so it can check code safety

B. To make the code run faster at runtime

C. To allow variables to change types dynamically

D. To avoid writing any type annotations

Solution

1. Step 1: Understand the role of type narrowing

   Type narrowing helps TypeScript know the exact type of a variable at a certain point in code.

2. Step 2: Recognize the benefit for code safety

   Knowing the exact type allows TypeScript to check for errors and prevent bugs before running the code.

3. Final Answer:

   To tell TypeScript the exact type so it can check code safety -> Option A

4. Quick Check:

   Type narrowing = safer code [OK]

Hint: Type narrowing means telling TypeScript exact types [OK]

Common Mistakes:

• Thinking it speeds up runtime
• Believing it allows dynamic type changes
• Assuming it removes need for type annotations

2. Which of the following is a correct way to narrow a variable's type in TypeScript?

easy

A. function test(value: number | string) { return value; }

B. value = 'string' as number;

C. let value: any = 5; value = 'hello';

D. if (typeof value === 'string') { /* value is string here */ }

Solution

1. Step 1: Identify type narrowing syntax

   Using typeof checks like typeof value === 'string' narrows the type inside the block.

2. Step 2: Check other options for correctness

   value = 'string' as number; forces wrong type with as, let value: any = 5; value = 'hello'; uses any without narrowing, function test(value: number | string) { return value; } does not narrow inside function.

3. Final Answer:

   if (typeof value === 'string') { /* value is string here */ } -> Option D

4. Quick Check:

   typeof check narrows type [OK]

Hint: Use typeof or instanceof to narrow types [OK]

Common Mistakes:

• Using 'as' to force wrong types
• Not using any type checks
• Confusing type assertion with narrowing

3. What will be the output of this TypeScript code?

function printLength(x: string | number) {
  if (typeof x === 'string') {
    return x.length;
  } else {
    return x.toFixed(2);
  }
}
console.log(printLength('hello'));
console.log(printLength(3.14159));

medium

A. hello and 3.14

B. 5 and 3.14159

C. 5 and 3.14

D. Error because length is not on number

Solution

1. Step 1: Analyze the type narrowing in the function

   The if checks if x is a string, then returns its length (5 for 'hello'). Else, it treats x as number and calls toFixed(2).

2. Step 2: Evaluate the outputs for given inputs

   For 'hello', output is 5. For 3.14159, toFixed(2) returns '3.14'.

3. Final Answer:

   5 and 3.14 -> Option C

4. Quick Check:

   Type narrowing enables correct method calls [OK]

Hint: Check typeof to know which method runs [OK]

Common Mistakes:

• Expecting full decimal for number output
• Assuming length works on number
• Ignoring type narrowing effect

4. Identify the error in this TypeScript code and why type narrowing is needed:

function process(value: string | number) {
  console.log(value.length);
}

medium

A. Error: string type cannot be logged

B. Error: number type has no 'length' property, need narrowing

C. No error, code runs fine

D. Error: function missing return type

Solution

1. Step 1: Understand the union type usage

   The parameter value can be string or number, but length exists only on string.

2. Step 2: Identify why narrowing is needed

   Without checking type, accessing length on number causes error. Type narrowing is needed to safely access length.

3. Final Answer:

   Error: number type has no 'length' property, need narrowing -> Option B

4. Quick Check:

   Accessing properties needs type narrowing [OK]

Hint: Check type before accessing properties [OK]

Common Mistakes:

• Ignoring union types
• Assuming all types have same properties
• Not using if or typeof checks

5. You have a function that accepts string | number | null. You want to safely return the string length or number fixed to 1 decimal, or 0 if null. Which code correctly uses type narrowing?

hard

A. function format(x: string | number | null) {
if (x === null) return 0;
if (typeof x === 'string') return x.length;
return x.toFixed(1);
}

B. function format(x: string | number | null) {
if (x) return x.length || x.toFixed(1);
return 0;
}

C. function format(x: string | number | null) {
return x.length ?? x.toFixed(1) ?? 0;
}

D. function format(x: string | number | null) {
if (typeof x === 'number') return x.length;
else if (typeof x === 'string') return x.toFixed(1);
else return 0;
}

Solution

1. Step 1: Check handling of null

   function format(x: string | number | null) { if (x === null) return 0; if (typeof x === 'string') return x.length; return x.toFixed(1); } explicitly returns 0 if x is null, which is correct.

2. Step 2: Verify type narrowing for string and number

   function format(x: string | number | null) { if (x === null) return 0; if (typeof x === 'string') return x.length; return x.toFixed(1); } uses typeof to check string and number separately, calling correct methods safely.

3. Step 3: Identify errors in other options

   function format(x: string | number | null) { if (x) return x.length || x.toFixed(1); return 0; } incorrectly uses x.length || x.toFixed(1) without narrowing; function format(x: string | number | null) { return x.length ?? x.toFixed(1) ?? 0; } uses nullish coalescing incorrectly; function format(x: string | number | null) { if (typeof x === 'number') return x.length; else if (typeof x === 'string') return x.toFixed(1); else return 0; } swaps methods for types.

4. Final Answer:

   function format(x: string | number | null) { if (x === null) return 0; if (typeof x === 'string') return x.length; return x.toFixed(1); } -> Option A

5. Quick Check:

   Explicit checks safely narrow types [OK]

Hint: Check null first, then typeof string or number [OK]

Common Mistakes:

• Not checking null before accessing properties
• Mixing up string and number methods
• Using || or ?? without narrowing