TypeScript Union

In TypeScript, a union type allows a variable to hold values of multiple types. It is defined using the | (pipe) symbol, making code flexible while still enforcing type safety.

Syntax:

type Variable = Type1 | Type2 | Type3;
let value: Variable;

In this syntax:

• | (pipe symbol) is used to create a union type.
• Variable is a custom type that can be Type1, Type2, or Type3.
• A variable declared as Variable can store a value of any one of the listed types.
• This helps in cases where a value can come in different formats (e.g., number or string).

Now let's understand this with the help of example:

let value: number | string;  
value = 190;  
console.log("Numeric value of the value: " + value);  
value = "Welcome to TypeScript!";  
console.log("String value of the value: " + value);

Compiling the above code to generate the following JavaScript code.

let value: number | string;  
value = 190;  
console.log("Numeric value of the value: "+value);  
value = "Welcome to TypeScript!";  
console.log("String value of the value: "+value); 

Output:

190
Welcome to TypeScript!

Example:

let geeks: (string | number);
geeks = 123;   
geeks = "XYZ"; 
geeks = true;   

Output

123
XYZ

In this example:

• The variable geeks is of union type, denoted as (string | number).
• It can hold a string or a number, but no other type is allowed.

Function Parameter as Union Type

We can pass the function as a parameter. In this example, parameter geeks is of union type. You can pass either a string value or a number value otherwise the compiler will give an error.

Now let's understand this with the help of example:

function displayType(geeks: string | number) {
    if (typeof geeks === "number")
        console.log("geeks is number.");
    else if (typeof geeks === "string")
        console.log("geeks is string.");
}

// Valid calls
displayType(49);      
displayType("GFG"); 

// Invalid call
// displayType(true); // Compiler Error: Argument of type 'boolean' is not assignable to parameter of type 'string | number'

Output

geeks is number.
geeks is string.

In this example:

• displayType accepts a string or number because of the union type (string | number).
• typeof checks whether the value is a number or string and logs the result.
• Calling displayType with a number or string works.
• Passing a boolean causes a compiler error since it’s not in the union type.

Array as Union Type

In union type we can also pass an array. The program declares an array. The array can represent either a numeric collection or a string collection.

Example:

var arr = [2, 5, 7, 5, 11, 15];

console.log("Display the array elements");
for (var i = 0; i < arr.length; i++) {
   console.log(arr[i]);
}

arr = ["Geeks", "G4G", "GFG", "GeeksforGeeks"];

console.log("Display the array elements");

for (var i = 0; i < arr.length; i++) {
   console.log(arr[i]);
}

Output:

Display the array elements
2
5
7
5
11
15
Display the array elements
Geeks
G4G
GFG
GeeksforGeeks

In this example:

• Creates a number array [2, 5, 7, 5, 11, 15] and prints each element.
• Replaces it with a string array ["Geeks", "G4G", "GFG", "GeeksforGeeks"] and prints each element.

Union can Replace enums

A union can be used instead of an enum to represent a list of constant types.

• Enums are collections of named constants.
• By default, enum values are assigned numeric indexes starting from 0 (0, 1, 2, …).
• In TypeScript, enums are transpiled into JavaScript, which means the TypeScript code is converted into equivalent JavaScript code that can run in browsers or Node.js.

Example:

enum Colors {
    Red,
    Green,
    Blue
}

let color1: Colors = Colors.Green;  
console.log(color1);  
console.log(Colors[1]); 

Output

1
Green

In this example:

• Colors is an enum with default numeric values: Red = 0, Green = 1, Blue = 2.
• color1 = Colors.Green stores the numeric value 1.
• console.log(color1) prints 1.
• console.log(Colors[1]) uses reverse mapping to get the name "Green".