Union Types in Typescript allows a variable to have the ability to store a value of several types. We define union types by using a pipe (|) to separate each of the possible types. Hence, number | string | boolean is the type of a variable, which can have the value that can be a number, a string, or a boolean.
Table of Contents
Syntax
The syntax for declaring the variable of union type is as shown below
let : type1 | type2 | .. | .. | typeN
Example:
let a:number|string
In the following example, the variable a can take either number or string. Hence you can only assign either a number or string to it. If you assign any other type like boolean (a=true), the compiler will throw an error.
1 2 3 4 5 6 7 8 9 10 11 12 | let a:number|string a = 1 console.log(typeof a) //number console.log(a) //1 a = "hello" console.log(typeof a) //string console.log(a) //hello a=true //Compile error Type 'true' is not assignable to type 'string | number' |
Union Types As Function Parameter
The following example shows how you can use union Types to restrict the function Parameter. Invoking the function with any other argument other than the string or number will result in a compile error.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function sayHello(arg: number|string) { if (typeof arg=="number") { console.log(typeof arg); //number console.log('Received a number'); }else if (typeof arg=="string") { console.log(typeof arg); //string console.log('Received a string'); } } sayHello(10); //ok sayHello("Hello"); //ok sayHello(true); //error Argument of type 'true' is not assignable to parameter of type 'string | number'.ts(2345) |
Here is an use case for using the Unions. The function takes either string or array of string and prints the content back.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function printMe(arg: string | string[]) { if (typeof arg == "string") { console.log(arg) } else { var i:number=0; for (i = 0; i < arg.length; i++) { console.log(arg[i]) } } } console.log("Printing String") printMe("Rahul") console.log("Printing Array") printMe(["Rahul", "Saurva", "Sachin", "Laxman"]) |
Function Return Types
Use them as function return types as shown below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function someFn(arg: number): number | boolean { if (arg == 1) { return 1; //Ok } if (arg == 2) { return true; //ok } if (arg == 3) { return "Hello"; //Type '"Hello"' is not assignable to type 'number | boolean' } } |
Not just Primitives
We can create union types from any type, not just primitive types. The following example shows the getName function can take the argument that is of Product and Employee.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | class Product { ProductName: string; Code: string; } class Employee { EmployeeName: string; Code: string; } function getName(item: Product | Employee) { let desc: string; if (item instanceof Product) { desc = item.ProductName; } else { desc = item.EmployeeName; } } |
Literal Types
Literal types is one of very useful features of the TypeScript. Its power comes when you use it along with the Union Types.
In the following example, you only pass the string literals "start", “stop", true & false to the engine function. The string "Start" is not allowed. The string variable containing the "start" is also not allowed.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | function engine(value: "start" |"stop" | boolean) { if (value=="start" || value==true) { //Start the Engine console.log("Start the Engine") } if (value=="stop" || value==false) { //Stop the Engine console.log("Stop the Engine") } } engine("start") //OK engine(true) //OK engine("stop") //OK engine(false) //OK engine("Start") //Argument of type '"Start"' is not assignable to parameter of type 'boolean | "start" | "stop"' let str:string="start"; engine(str) //Argument of type 'string' is not assignable to parameter of type 'boolean | "start" | "stop" |
You can also define the function as follows
1 2 3 4 5 6 | function engine(value: "start" |"stop" | true | false) { //Add number literals 1 & 0 function engine(value: "start" |"stop" | 1 | 0 | true | false) { |
