Custom type guard functions in Typescript - Step-by-Step Execution

Concept Flow - Custom type guard functions

Call function with unknown type

↓

Check condition inside function

↓

Return true

↓

TypeScript narrows type

↓

Use narrowed type safely

The function checks a condition to confirm a type, returns true or false, and TypeScript uses this to narrow the variable's type.

Execution Sample

Typescript

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

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

This code defines a custom type guard to check if a value is a string, then safely uses string methods after the check.

Execution Table

Step	Action	Input Value	Condition Result	Return Value	TypeScript Type After
1	Call isString with input='hello'	'hello'	typeof 'hello' === 'string' is true	true	input is string
2	Inside if block, use input.toUpperCase()	'hello'	N/A	N/A	input treated as string
3	Output result of input.toUpperCase()	'hello'	N/A	N/A	Output: 'HELLO'
4	If input was not string, isString would return false	e.g. 123	false	false	input remains unknown
5	Outside if block, input type not narrowed	e.g. 123	N/A	N/A	input is unknown

💡 Execution stops after safely using input as string inside if block or skipping if not string.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
input	unknown ('hello')	'hello' (checked)	'hello' (narrowed to string)	'hello' (used as string)
isString(input)	N/A	true	N/A	N/A

Key Moments - 3 Insights

Why does TypeScript allow calling string methods on input inside the if block?

Because the custom type guard returned true at step 1, TypeScript narrows input's type to string inside the if block, allowing string methods safely.

What happens if the input is not a string?

At step 4, the type guard returns false, so TypeScript keeps input as unknown outside the if block, preventing unsafe string method calls.

Why do we write 'value is string' in the function signature?

This syntax tells TypeScript that when the function returns true, the input value can be treated as a string, enabling type narrowing.

Visual Quiz - 3 Questions

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

A number

B unknown

C string

D boolean

💡 Hint

Check the 'TypeScript Type After' column in row 1.

At which step does the function return false for a non-string input?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look for the row where the return value is false in the execution table.

If the type guard function always returned true, what would happen to the type of 'input'?

A It would always be narrowed to string

B It would remain unknown

C It would become number

D It would cause a compile error

💡 Hint

Refer to how TypeScript narrows types when the guard returns true in the execution table.

Concept Snapshot

Custom type guard functions use the syntax 'value is Type' in the return type.
They return true if the value matches the type, false otherwise.
TypeScript uses this to narrow variable types inside conditional blocks.
This allows safe use of properties and methods specific to the narrowed type.
Example: function isString(value: unknown): value is string { return typeof value === 'string'; }

Full Transcript

This visual execution shows how a custom type guard function works in TypeScript. The function is called with a value of unknown type. Inside the function, a condition checks if the value is a string. If true, the function returns true, and TypeScript narrows the variable's type to string in the if block. This allows safe use of string methods like toUpperCase. If the function returns false, TypeScript keeps the type as unknown outside the if block, preventing unsafe operations. The key is the special return type syntax 'value is string' which tells TypeScript how to narrow types based on the function's result.