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;
}

JavaScript

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[];
};

JavaScript

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>;
}

JavaScript

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;

JavaScript

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 TypeScript Interfaces?

iamgaurav

Improve

Article Tags :

What are Recursive Types & Interfaces in TypeScript ?

Recursive Interfaces

Recursive Type Aliases

Syntax:

Using Recursive Types with Generics

Syntax:

Recursive Types for Function Definitions

Syntax:

Similar Reads