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
Similar Reads
What are TypeScript Interfaces? TypeScript interfaces define the structure of objects by specifying property types and method signatures, ensuring consistent shapes and enhancing code clarity.Allow for optional and read-only properties for flexibility and immutability.Enable interface inheritance to create reusable and extendable
4 min read
What is Recursive Generic in TypeScript ? In TypeScript, a recursive generic is a type that refers to itself within its definition, enabling the creation of data structures or types containing references to the same type within their structure. This capability proves invaluable when dealing with nested or hierarchical data structures like t
4 min read
Recursive Type Guards In TypeScript In TypeScript type guards help determine the type of a variable at runtime, they are especially useful when dealing with complex types like unions, discriminated unions or even recursive structures and a recursive type guard is a type guard function that can handle complex nested types, including th
6 min read
What is the Record Type in TypeScript ? In TypeScript, the Record type is a utility type that represents an object type with keys and values of a specific type. It is often used when you want to define a type for the keys and values of an object. In this article, we will learn what is the Record type in TypeScript. Syntax:Record<Keys,
2 min read
What is Type Erasure in TypeScript? TypeScript is a very mighty superset of JavaScript, which adds static typing to the language and allows developers to catch errors early on as well as write more maintainable code. This being said a TypeScript type system erases type information at compile time (or during the compilation), a phenome
4 min read