What are Recursive Types & Interfaces in TypeScript ?

Last Updated : 24 Jan, 2025

In TypeScript, recursive types and interfaces are constructs that reference themselves within their definitions, enabling the modeling of complex, nested data structures.

They are particularly useful for representing hierarchical data such as trees and linked lists.
By allowing types to be defined in terms of themselves, TypeScript facilitates the creation of flexible and dynamic data models.

Recursive Interfaces

Recursive interfaces in TypeScript allow an interface to reference itself within its definition, enabling the modeling of hierarchical data structures like trees or linked lists.

Syntax:

interface RecursiveInterface {
  value: any;
  next?: RecursiveInterface;
}

interface ListNode {
  value: number;
  next?: ListNode;
}

const node1: ListNode = { value: 1 };
const node2: ListNode = { value: 2, next: node1 };

console.log(node2);

ListNode interface defines a node containing a value and an optional next property referencing another ListNode.
node1 is a single node with a value of 1.
node2 is a node with a value of 2, pointing to node1 as its next node.

Output

{
  value: 2,
  next: {
    value: 1
  }
}

Recursive Type Aliases

Type aliases in TypeScript can also be recursive, allowing for flexible and complex type definitions, such as representing tree structures where each node can have multiple children.

Syntax:

type RecursiveType = {
  value: any;
  children?: RecursiveType[];
};

type TreeNode = {
  value: string,
  children?: TreeNode[],
};

const tree: TreeNode = {
  value: "root",
  children: [
    {
      value: "child1",
      children: [
        {
          value: "grandchild1",
        },
      ],
    },
    {
      value: "child2",
    },
  ],
};

console.log(tree);

TreeNode type defines a node with a value and an optional children array containing other TreeNode elements.
tree represents a hierarchical structure with a root node having two children, one of which has its own child.

Output

{
  value: "root",
  children: [
    {
      value: "child1",
      children: [
        {
          value: "grandchild1"
        }
      ]
    },
    {
      value: "child2"
    }
  ]
}

Using Recursive Types with Generics

Combining recursive types with generics allows for the creation of self-referential structures that can handle various data types.

Syntax:

interface RecursiveGenericInterface<T> {
  value: T;
  next?: RecursiveGenericInterface<T>;
}

interface GenericListNode<T> {
  value: T;
  next?: GenericListNode<T>;
}

const node1: GenericListNode<number> = 
    { value: 123 };
const node2: GenericListNode<number> = 
    { value: 456, next: node1 };

console.log(node2);

GenericListNode interface uses a generic type T to define the type of value.
node1 and node2 are linked list nodes holding numeric values, demonstrating the flexibility of generics in recursive types.

Output

{
  value: 456,
  next: {
    value: 123
  }
}

Recursive Types for Function Definitions

Recursive types can also define functions that return themselves, useful for creating self-referential algorithms.

Syntax:

type RecursiveFunction = () => RecursiveFunction | null;

type RecursiveFunction = () => RecursiveFunction | null;

const recursiveFunction: RecursiveFunction = () => {
  const stopCondition = true; // Replace with actual logic
  return stopCondition ? null : recursiveFunction;
};

console.log(recursiveFunction());

RecursiveFunction type describes a function that returns either itself or null.
recursiveFunction implements this type, returning null based on a condition, demonstrating a base case in recursion.

Output

null

What are Recursive Types & Interfaces in TypeScript -FAQs

What are recursive types in TypeScript?

Recursive types in TypeScript are types that reference themselves within their own definition, allowing for the modeling of complex, nested structures such as trees or linked lists.

How do recursive interfaces differ from recursive type aliases?

Both recursive interfaces and recursive type aliases allow self-referential definitions. Interfaces are typically used for defining object shapes, while type aliases can represent more complex types, including unions and intersections.

Can recursive types be used with generics in TypeScript?

Yes, combining recursive types with generics enables the creation of flexible, self-referential structures that can handle various data types, enhancing code reusability and type safety.

What are common use cases for recursive types and interfaces?

They are commonly used to represent hierarchical data structures like trees, linked lists, and JSON-like objects, where elements can contain other elements of the same type.

Are there any limitations when using recursive types in TypeScript?

TypeScript may have limitations with deeply nested recursive types, potentially leading to performance issues or complexity in type checking. It's essential to manage recursion depth and complexity to maintain code readability and performance.