Skip to content
Related Articles

Related Articles

TypeScript Union

View Discussion
Improve Article
Save Article
  • Last Updated : 24 Jun, 2019

The TypeScript union has the ability to combine one or two different types of data (i.e., number, string, float, double, etc). It is the most powerful way to express a variable with multiple types. Use pipe (‘|’) symbol to combine two or more data types to achieve Union type.

Syntax:

(type1|type2|type3|...|type-n)

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: In this example the geeks is of union type, denoted using (string | number). So, we can assign a string or a number to it nothing else is allowed.




let geeks: (string | number);
geeks = 123;   // OK
geeks = "XYZ"; // OK
geeks = true// Compiler Error 


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.
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.')
}
  
// Output: Code is number. 
displayType(49); 
  
// Output: Code is string.
displayType("GFG"); 
  
// Compiler Error: Argument of type 'true' is not 
// assignable to a parameter of type string | number
displayType(true); 


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:




//Generated by typescript 1.8.10
var arr = [2, 5, 7, 5, 11, 15];
  
console.log("Display the array elements");
  
// Loop to display array elements
for (var i = 0; i < arr.length; i++) {
   console.log(arr[i]);
}
  
// Declare another array
arr = ["Geeks", "G4G", "GFG", "GeeksforGeeks"];
  
console.log("Display the array elements");
  
// Loop to 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

Union can Replace enums: It is a list of constant types that is created by Enums. By default, enums have index values (0, 1 ,2, 3, etc). Enums are actually transpiled (taking source code written in one language and transforming into another language that has a similar level of abstraction) and end up into the result like JavaScript.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!