How to Create a Union Type from Nested Array in TypeScript ?

TypeScript developers often encounter scenarios where they need to represent a value that could be one of several different types. TypeScript’s union types provide a solution to this problem by allowing variables to hold values of multiple types. However, when dealing with nested arrays, each nested array might represent a different type, making it challenging to create a union type that encompasses all possible values.

There are several approaches to creating a Union type from nested arrays in TypeScript which are as follows:

Using Type Assertions

Type assertions allow developers to manually set the type of a value in TypeScript. By iterating through nested arrays and asserting each value’s type, we can construct a union type.

Syntax:

type UnionFromArray<T extends any[][]> = T extends (infer U)[] ? U : never;

Example: In this example, we define a type UnionFromArray that takes a nested array as input. It infers the type of the nested array and returns the union of its elements.

JavaScript

const nestedArrays =
  [
    [1, 2],
    ['a', 'b'],
    [true, false]
  ];

type UnionFromArray<T extends any[][]> =
  T extends (infer U)[] ? U : never;

type UnionType = UnionFromArray<typeof nestedArrays[number]>;

const exampleValue: UnionType =
  nestedArrays[0][0];
console.log(exampleValue);

Output

1

Using Conditional Types

Conditional types in TypeScript enable developers to create types that depend on other types. By leveraging conditional types, we can dynamically construct a union type based on the values in nested arrays.

Syntax:

type Flatten<T> = T extends Array<infer U> ? U : never;
type UnionFromArray<T extends any[][]> = Flatten<T[number]>;

Example: Here, we define a type UnionFromArray that takes a nested array as input. It flattens the nested array into a single array and then extracts the union of its elements.

JavaScript

type Flatten<T> =
  T extends Array<infer U> ? U : never;
type UnionFromArray<T extends any[][]>
  = Flatten<T[number]>;

const nestedArrays =
  [
    [1, 2],
    ['a', 'b'],
    [true, false]
  ];
type UnionType = UnionFromArray<typeof nestedArrays>;

const exampleValue: UnionType = nestedArrays[1][1];
console.log(exampleValue);

Output

'b'

Using Recursive Types

Recursive types in TypeScript allow types to reference themselves within their own definition. By recursively traversing nested arrays, we can build a union type that captures all possible values.

Syntax:

type UnionFromArray<T extends any[][]> = T extends [infer U, ...infer Rest] ? (U | UnionFromArray<Rest>) : never;

Example: In this example, we define a type UnionFromArray that takes a nested array as input. It recursively traverses the nested arrays, combining the types of their elements into a union.

JavaScript

type UnionFromArray<T extends any[][]> =
  T extends [infer U, ...infer Rest]
  ?
  (U | UnionFromArray<Rest>) : never;

const nestedArrays =
  [
    [1, 2],
    ['a', 'b'],
    [true, false]
  ];
type UnionType = UnionFromArray<typeof nestedArrays>;

const exampleValue: UnionType =
  nestedArrays[2][0];
console.log(exampleValue);

Output:

true