Recursive generic types in Typescript - Mini Project: Build & Apply

Understanding Recursive Generic Types in TypeScript

📖 Scenario: Imagine you are building a system to represent nested folders and files, like a simple file explorer. Each folder can contain files and other folders inside it.

🎯 Goal: You will create a recursive generic type called TreeNode that can represent this nested structure. Then, you will create an example folder tree using this type and print the names of all files and folders.

📋 What You'll Learn

Create a recursive generic type TreeNode that has a name and optional children which is an array of TreeNode.

Create a variable folderTree using TreeNode to represent a folder with nested files and folders.

Write a function printTree that recursively prints the names of all nodes in the tree.

Call printTree with folderTree and print the output.

💡 Why This Matters

🌍 Real World

Recursive generic types help represent complex nested data like file systems, menus, or organizational charts in a clear and type-safe way.

💼 Career

Understanding recursive types is important for TypeScript developers working on frontend or backend projects that handle hierarchical data structures.

1

Create the recursive generic type TreeNode

Create a recursive generic type called TreeNode with a generic parameter T. It should have a name of type T and an optional children property which is an array of TreeNode<T>.

Typescript

// Your code here

Hint

Think of TreeNode as a box that can hold a name and optionally many smaller boxes of the same type inside it.

2

Create a variable folderTree using TreeNode<string>

Create a variable called folderTree of type TreeNode<string>. It should represent a folder named root with two children: a file named file1.txt and a folder named subfolder which itself contains a file named file2.txt.

Typescript

type TreeNode = {
  name: T;
  children?: TreeNode[];
};

// Your code here

Hint

Remember that children is an array of TreeNode<string>. Nest the objects accordingly.

3

Write a recursive function printTree to print all names

Write a function called printTree that takes a TreeNode<string> and a depth number (default 0). It should print the node's name with indentation based on depth, then recursively call itself on each child with depth + 1.

Typescript

type TreeNode = {
  name: T;
  children?: TreeNode[];
};

const folderTree: TreeNode = {
  name: "root",
  children: [
    { name: "file1.txt" },
    {
      name: "subfolder",
      children: [
        { name: "file2.txt" }
      ]
    }
  ]
};

// Your code here

Hint

Use console.log with indentation. Call printTree inside the loop for children.

4

Call printTree with folderTree and print the output

Call the function printTree with the variable folderTree to print the entire folder structure.

Typescript

type TreeNode = {
  name: T;
  children?: TreeNode[];
};

const folderTree: TreeNode = {
  name: "root",
  children: [
    { name: "file1.txt" },
    {
      name: "subfolder",
      children: [
        { name: "file2.txt" }
      ]
    }
  ]
};

function printTree(node: TreeNode, depth = 0): void {
  console.log("  ".repeat(depth) + node.name);
  if (node.children) {
    for (const child of node.children) {
      printTree(child, depth + 1);
    }
  }
}

// Your code here

Hint

Just call printTree(folderTree) to see the folder structure printed.

Practice

1. What is the main purpose of using recursive generic types in TypeScript?

easy

A. To create simple flat types without any nesting

B. To automatically generate UI components

C. To enforce runtime type checking

D. To define types that refer to themselves for nested or hierarchical data

Solution

1. Step 1: Understand recursive generic types

   Recursive generic types allow a type to refer to itself, which helps model nested or hierarchical data structures like trees or linked lists.

2. Step 2: Compare options

   Options A, C, and D do not describe recursive generics correctly. Only To define types that refer to themselves for nested or hierarchical data correctly states their purpose.

3. Final Answer:

   To define types that refer to themselves for nested or hierarchical data -> Option D

4. Quick Check:

   Recursive generics = self-referential types [OK]

Hint: Recursive generics model nested data by referring to themselves [OK]

Common Mistakes:

• Thinking recursive generics are for runtime checks
• Confusing recursive generics with simple generics
• Assuming recursive generics flatten data

2. Which of the following is the correct syntax to define a recursive generic type for a nested object with children of the same type?

easy

A. type Node<T> = { value: T; children: Node[] };

B. type Node<T> = { value: T; children?: Node<T>[] };

C. type Node<T> = { value: T; children: Node<T> };

D. type Node<T> = { value: T; children: T[] };

Solution

1. Step 1: Analyze recursive generic syntax

   The type should refer to itself with the generic parameter and allow children to be an array of the same type or optional to avoid infinite recursion.

2. Step 2: Check each option

   type Node<T> = { value: T; children?: Node<T>[] }; correctly defines children as optional array of Node<T>. type Node<T> = { value: T; children: Node[] }; misses generic parameter. type Node<T> = { value: T; children: Node<T> }; makes children a single Node, not array. type Node<T> = { value: T; children: T[] }; uses T[] which is incorrect.

3. Final Answer:

   type Node<T> = { value: T; children?: Node<T>[] }; -> Option B

4. Quick Check:

   Recursive generic with optional children array = type Node<T> = { value: T; children?: Node<T>[] }; [OK]

Hint: Use optional array of same generic type for recursive children [OK]

Common Mistakes:

• Omitting generic parameter in recursive reference
• Making children non-array when it should be array
• Not making children optional causing infinite recursion

3. Given the following TypeScript code, what is the type of tree.children[0].children[0].value?

type TreeNode<T> = { value: T; children?: TreeNode<T>[] };
const tree: TreeNode<string> = {
  value: "root",
  children: [
    { value: "child1", children: [{ value: "grandchild1" }] },
    { value: "child2" }
  ]
};

medium

A. string

B. TreeNode<string>

C. string | undefined

D. TreeNode<string> | undefined

Solution

1. Step 1: Understand the type definition

   TreeNode<T> has a value of type T. Here, T is string.

2. Step 2: Trace the property access

   tree.children[0].children[0].value accesses the value of a nested node, which is a string as per the generic type.

3. Final Answer:

   string -> Option A

4. Quick Check:

   Nested node value type = string [OK]

Hint: Generic type T defines value type at all levels [OK]

Common Mistakes:

• Confusing node type with value type
• Assuming children or value can be undefined here
• Mixing up generic parameter with node type

4. Identify the error in this recursive generic type definition:

type ListNode<T> = {
  value: T;
  next: ListNode<T>;
};

medium

A. 'value' should be optional

B. Generic parameter T is not used correctly

C. Missing optional property for 'next' causing infinite recursion

D. TypeScript does not support recursive types

Solution

1. Step 1: Analyze the recursive type definition

   The next property refers to ListNode<T> without being optional, so it requires an infinite chain.

2. Step 2: Identify the fix

   Making next optional (next?: ListNode<T>) provides a base case to stop recursion.

3. Final Answer:

   Missing optional property for 'next' causing infinite recursion -> Option C

4. Quick Check:

   Recursive types need optional base case [OK]

Hint: Make recursive property optional to avoid infinite recursion [OK]

Common Mistakes:

• Forgetting to add '?' to recursive property
• Thinking TypeScript disallows recursive types
• Making unrelated properties optional

5. You want to create a recursive generic type NestedArray<T> that represents an array of elements of type T or arrays of NestedArray<T> (nested arrays). Which of the following definitions correctly models this?

hard

A. type NestedArray<T> = Array;

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

C. type NestedArray<T> = Array<T> | NestedArray<T>;

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

Solution

1. Step 1: Understand the nested array structure

   A nested array can be an array of elements of type T or arrays of nested arrays recursively.

2. Step 2: Evaluate each option

   type NestedArray<T> = Array; correctly defines NestedArray<T> as an array whose elements are either T or NestedArray<T>. type NestedArray<T> = T | NestedArray<T>[]; is incorrect because it allows a single element T without array wrapper. Options C and D misuse union and array placement.

3. Final Answer:

   type NestedArray<T> = Array<T | NestedArray<T>>; -> Option A

4. Quick Check:

   Nested arrays = arrays of T or nested arrays [OK]

Hint: Use array of union of T or NestedArray<T> for nested arrays [OK]

Common Mistakes:

• Allowing T alone without array wrapper
• Incorrect union placement outside array
• Confusing recursive generic with simple union