Recursive generic types in Typescript - Step-by-Step Execution

Concept Flow - Recursive generic types

Define generic type T

↓

Type refers to itself with T

↓

Type expands recursively

↓

Base case stops recursion

↓

Type fully resolved

A recursive generic type is a type that refers to itself with a generic parameter, expanding until a base case stops the recursion.

Execution Sample

Typescript

type NestedArray<T> = T | NestedArray<T>[];

const example: NestedArray<number> = [1, [2, [3, 4], 5], 6];

Defines a recursive generic type NestedArray that can be a value of type T or an array of NestedArray<T>.

Execution Table

Step	Action	Type Expression	Evaluation	Resulting Type
1	Define NestedArray<T>	T | NestedArray<T>[]	Type refers to itself	Recursive type definition
2	Instantiate NestedArray<number>	number | NestedArray<number>[]	Expands to number or array of NestedArray<number>	Recursive expansion begins
3	Evaluate example value	[1, [2, [3, 4], 5], 6]	Check each element matches NestedArray<number>	Valid nested arrays and numbers
4	Check base case	number	Primitive type, recursion stops here	Base case reached
5	Full type resolved	NestedArray<number>	Nested arrays of numbers or numbers	Type accepted

💡 Recursion stops when the type reaches the base case (primitive type number).

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
T	Generic placeholder	number	number	number
NestedArray<T>	T | NestedArray<T>[]	number | NestedArray<number>[]	number | NestedArray<number>[]	number | NestedArray<number>[]
example	undefined	undefined	[1, [2, [3, 4], 5], 6]	[1, [2, [3, 4], 5], 6]

Key Moments - 3 Insights

Why doesn't the recursive type cause infinite expansion?

Because the recursion stops at the base case when the type is the primitive type number, as shown in step 4 of the execution table.

How does TypeScript know when to stop expanding the recursive generic?

TypeScript stops expanding when it reaches a non-recursive type like number, which acts as the base case (step 4).

Can the recursive generic type hold both single values and arrays?

Yes, the type is defined as T or an array of NestedArray<T>, so it can hold single values or nested arrays, as shown in the example value in step 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the type of NestedArray<number> after step 2?

A number | NestedArray<number>[]

B number[]

C NestedArray<number>

D number

💡 Hint

Check the 'Resulting Type' column at step 2 in the execution table.

At which step does the recursion stop expanding the type?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look for the step where the base case 'number' is reached in the execution table.

If we changed T to string, how would the variable tracker change after step 2?

A T would be string[], NestedArray<T> would be string[] | NestedArray<string[]>[]

B T would be number, NestedArray<T> would be number | NestedArray<number>[]

C T would be string, NestedArray<T> would be string | NestedArray<string>[]

D No change

💡 Hint

Refer to the variable tracker row for T and NestedArray after step 2.

Concept Snapshot

Recursive generic types allow a type to refer to itself with a generic parameter.
Syntax example: type NestedArray<T> = T | NestedArray<T>[];
This defines a type that can be a value of T or an array of itself.
Recursion stops at a base case type (like number or string).
Useful for nested data structures like trees or nested arrays.

Full Transcript

This visual execution trace shows how recursive generic types work in TypeScript. We start by defining a generic type NestedArray<T> that can be either a value of type T or an array of NestedArray<T>. When we instantiate it with number, the type expands recursively to allow nested arrays of numbers. The recursion stops when the type reaches the base case, which is the primitive type number. The example value demonstrates valid nested arrays and numbers matching the type. Variable tracking shows how the generic placeholder T is replaced by number and how the example variable holds the nested array structure. Key moments clarify why recursion stops and how the type can hold both single values and arrays. The quizzes test understanding of type expansion, recursion stopping point, and how changing T affects the type. The snapshot summarizes the concept with syntax and behavior. This helps beginners see step-by-step how recursive generic types expand and resolve.