Recursive generic types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a recursive generic type with nested arrays

What is the type of NestedArray<number> when used as NestedArray<number> = [1, [2, [3]]]?

Typescript

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

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

A "example" must be an array of arrays of numbers with exactly 3 levels

B "example" can be a number or an array of numbers nested any depth

C "example" can only be a single number, not arrays

D "example" must be a flat array of numbers only

💡 Hint

Think about how the recursive type allows nesting arrays inside arrays.

The type NestedArray<T> is defined recursively as either a value of type T or an array of NestedArray<T>. This means it can be a number, or an array of numbers, or an array of arrays of numbers, and so on, to any depth.

❓ Predict Output

intermediate

Output of recursive generic type with object nodes

Given the type below, what is the type of Tree<string>?

Typescript

type Tree<T> = {
  value: T;
  children?: Tree<T>[];
};

const example: Tree<string> = {
  value: "root",
  children: [
    { value: "child1" },
    { value: "child2", children: [{ value: "grandchild" }] }
  ]
};

A "example" is an object with a value of type string and optional children which are arrays of similar objects recursively

B "example" is a flat object with only a value string and no children allowed

C "example" must be an array of strings only

D "example" is a string or an array of strings

💡 Hint

Look at how the children property is defined recursively.

The Tree<T> type defines an object with a value of type T and an optional children property which is an array of Tree<T> objects. This allows for recursive tree structures.

🔧 Debug

advanced

Identify the error in recursive generic type definition

Which option contains a syntax error in the recursive generic type definition?

Typescript

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

A type Recursive<T> = T | Recursive<T>[];

B type Recursive<T> = T | Recursive<T>;

C type Recursive<T> = T | Recursive<T>[] | null;

D type Recursive<T> = T | Recursive[];

💡 Hint

Check if the generic parameter is correctly used in the recursive reference.

Option D uses Recursive[] without specifying the generic parameter <T>. This causes a syntax error because Recursive is a generic type and must be used with its parameter.

❓ Predict Output

advanced

Output of a mapped recursive generic type

What is the resulting type of DeepReadonly<{ a: { b: number } }> given the definition below?

Typescript

type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
};

type Example = DeepReadonly<{ a: { b: number } }>;

// What is the type of Example?

A { readonly a: { readonly b: number } }

B { a: { b: number } }

C { readonly a: { b: number } }

D { a: { readonly b: number } }

💡 Hint

The type recursively applies readonly to all nested properties.

The DeepReadonly type recursively marks all properties as readonly. For nested objects, it applies itself again, so a and b are both readonly.

🧠 Conceptual

expert

Understanding recursive generic constraints

Consider the recursive generic type below. What constraint does it enforce on the type parameter T?

Typescript

type RecursiveConstraint<T extends { children?: T[] }> = T;

A T must be an array type

B T can be any type including primitives

C T must be an object type that optionally has a children property which is an array of T

D T must be a function type with children as parameters

💡 Hint

Look at the constraint after the extends keyword carefully.

The constraint T extends { children?: T[] } means that T must be an object type that may have a children property which is an array of T itself, enabling recursive structures.