Type predicates in practice in Typescript - Step-by-Step Execution

Concept Flow - Type predicates in practice

Start with unknown type

↓

Call type predicate function

↓

Function returns true or false

Yes No↓

Narrow type

↓

Use narrowed type

↓

End

We start with a value of unknown type, use a type predicate function to check its type, then narrow the type based on the result to safely use it.

Execution Sample

Typescript

function isString(x: unknown): x is string {
  return typeof x === 'string';
}

const val: unknown = "hello";
if (isString(val)) {
  console.log(val.toUpperCase());
}

This code checks if 'val' is a string using a type predicate, then safely calls a string method.

Execution Table

Step	Variable	Type Before	Function Call	Predicate Result	Type After	Action
1	val	unknown	isString(val)	true	string	Enter if block
2	val	string	N/A	N/A	string	Call val.toUpperCase() -> 'HELLO'
3	val	string	N/A	N/A	unknown	Exit if block

💡 Predicate returned true, type narrowed to string, safe to call string methods

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
val	unknown ("hello")	string ("hello")	string ("hello")	unknown ("hello")

Key Moments - 2 Insights

Why can we call val.toUpperCase() inside the if block?

Because the type predicate function isString(val) returned true at step 1, so TypeScript knows val is a string inside the if block (see execution_table row 1).

What happens if isString(val) returns false?

If it returns false, the type of val stays unknown outside the if block, so calling string methods would cause an error (not shown in this trace but implied by exit_note).

Visual Quiz - 3 Questions

Look at the execution table, what is the type of 'val' after step 1?

A string

B unknown

C number

D boolean

💡 Hint

Check the 'Type After' column in execution_table row 1

At which step is val.toUpperCase() called?

A Step 1

B Step 2

C Step 3

D Never

💡 Hint

Look at the 'Action' column in execution_table row 2

If isString(val) returned false, what would happen to the type of val?

A It would become number

B It would be narrowed to string

C It would remain unknown

D It would become boolean

💡 Hint

See key_moments explanation about false predicate result

Concept Snapshot

Type predicates check a value's type at runtime.
Syntax: function fn(x): x is Type { return condition; }
If true, TypeScript narrows the variable's type.
Use inside if to safely access type-specific properties.
If false, type stays original.

Full Transcript

This example shows how a type predicate function 'isString' checks if a variable 'val' is a string. Initially, 'val' has an unknown type. When we call isString(val), it returns true, so TypeScript narrows 'val' to string inside the if block. This lets us safely call string methods like toUpperCase. If the predicate returned false, the type would remain unknown and calling string methods would cause errors. The execution table traces these steps, showing variable types and actions. This helps beginners see how type predicates work in practice.