Recursive Types

type TreeNode = {
  value: number;
  children?: TreeNode[]; // References itself
};

type NestedObject = {
  [key: string]: string | number | NestedObject;
};

const data: NestedObject = {
  name: 'Kogami Shinya',
  age: 28,
  address: {
    city: 'Tokyo',
    zip: '100-0000',
    area: {
      ward: 'Chiyoda',
    },
  },
};

// Type representing a JSON value
type JSONValue =
  | string
  | number
  | boolean
  | null
  | JSONValue[]
  | { [key: string]: JSONValue };

const json: JSONValue = {
  title: 'TypeScript',
  version: 5,
  stable: true,
  tags: ['lang', 'typed'],
  meta: { author: 'Microsoft' },
};

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

const tree: TreeNode<string> = {
  value: 'root',
  children: [
    { value: 'child1' },
    {
      value: 'child2',
      children: [{ value: 'grandchild' }],
    },
  ],
};

// Recursive utility type: DeepReadonly
type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object ? DeepReadonly<T[K]> : T[K];
};

TypeScript supports recursive type aliases (using type) since TypeScript 3.7. Before that, interfaces were required for recursive types, but now type aliases can directly reference themselves as well.

Recursive types let you accurately represent data structures of arbitrary depth. However, deeply nested type recursion can affect compiler performance. You can also combine recursive types with mapped types to create recursive utility types such as DeepReadonly and DeepPartial.

When using recursive types with recursive functions, narrow the type at each node using a typeof guard or an in operator guard as you traverse the structure.