TypeScript gives programs the ability to combine one or two types. Union types are a powerful way to express a value that can be one of the several types. Two or more data types are combined using the pipe symbol (|) to denote a Union Type. In other words, a union type is written as a sequence of types separated by vertical bars.

Syntax: Union literal

We use pipe symbol (|) to combine two or more types to achieve a union type in TypeScript −

Type1 | Type2 | Type3 

Union Type Variable

We can define a variable of type union of different types. For example,

let value: number | string | boolean;

In the above example, we define a variable named value of union type. We can assign numeric, string or boolean value to the variable.

Example: Union Type Variable

In the example below, the variable”s type is union. It means that the variable can contain either a number or a string as its value.

var val: string | number 
val = 12 
console.log("numeric value of val: "+val) 
val = "This is a string" 
console.log("string value of val: "+val)

On compiling, it will generate following JavaScript code.

var val;
val = 12;
console.log("numeric value of val: " + val);
val = "This is a string";
console.log("string value of val: " + val);

Its output of the above example code is as follows −

numeric value of val: 12 
string value of val: this is a string 

Union Type and Function Parameter

We can define a function with a parameter of union type. When you can call the function, you can pass the argument of any type of union type. For example,

function display(name: string | string[]){
   // function body;
}

In the above code snippet, function display() has parameter of union type (string or string array). You can call the function passing argument either a string or an array of string.

Example

In the example below, we defined a function named disp with a parameter of union type.

The function disp() can accept argument either of the type string or a string array.

function disp(name: string|string[]) { 
   if(typeof name == "string") { 
      console.log(name) 
   } else { 
      var i; 
      
      for(i = 0;i<name.length;i++) { 
         console.log(name[i])
      } 
   } 
} 
disp("mark") 
console.log("Printing names array....") 
disp(["Mark","Tom","Mary","John"])

On compiling, it will generate following JavaScript code.

function disp(name) {
   if (typeof name == "string") {
      console.log(name);
   } else {
      var i;
      for (i = 0; i < name.length; i++) {
         console.log(name[i]);
      }
   }
}

disp("mark");
console.log("Printing names array....");
disp(["Mark", "Tom", "Mary", "John"]);

The output is as follows −

Mark 
Printing names array…. 
Mark 
Tom
Mary
John 

Union Type and Arrays

Union types can also be applied to arrays, properties and interfaces. The following illustrates the use of union type with an array.

Example

The program declares an array. The array can represent either a numeric collection or a string collection.

var arr: number[]|string[]; 
var i: number; 
arr = [1,2,4] 
console.log("**numeric array**")  

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

arr = ["Mumbai","Pune","Delhi"] 
console.log("**string array**")  

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

On compiling, it will generate following JavaScript code.

var arr;
var i;
arr = [1, 2, 4];
console.log("**numeric array**");

for (i = 0; i < arr.length; i++) {
   console.log(arr[i]);
}
arr = ["Mumbai", "Pune", "Delhi"];
console.log("**string array**");

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

Its output is as follows −

**numeric array** 
1 
2 
4 
**string array** 
Mumbai 
Pune 
Delhi