TypeScript Union - TypeScript

What is TypeScript - Union?

TypeScript 1.4 makes use of unions to combine one or two types. It can be done using a pipe symbol (|) denote a Union Type.

Syntax: Union literal

Type1|Type2|Type3

Example: Union Type Variable

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)

In the example above, the variable’s type is union. It means that the variable can consists of either a number or a string as its value.

Upon compiling, it will produce the following JavaScript code.

//Generated by typescript 1.8.10 var val; val = 12; console.log("numeric value of val " + val); val = "This is a string"; console.log("string value of val " + val);

Its result is as below −

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

Example: Union Type and function parameter

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"])

We can see a function disp() which accepts either of the type string or a string array.

Upon compiling, it will produce the following JavaScript code.

//Generated by typescript 1.8.10 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 result is as below −

Mark Printing names array…. Mark Tom Mary John

Union Type and Arrays

Union types are applicable to arrays, properties and interfaces. The below example illustrates the use of union type with an array.

Example: Union Type and Array

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

In above program, an array is declared which represents either a numeric collection or a string collection.

Upon compiling, it will produce the below JavaScript code.

//Generated by typescript 1.8.10 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 result is as follows −

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