TypeScript Union

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:



filter_none

edit
close

play_arrow

link
brightness_4
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);

chevron_right


Compiling the above code to generate the following JavaScript code.

filter_none

edit
close

play_arrow

link
brightness_4
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); 

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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); 

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

//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]);
}

chevron_right


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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.