Tuples

At times, there might be a need to store a collection of values of varied types. Arrays will not serve this purpose. TypeScript gives us a data type called tuple that helps to achieve such a purpose.

It represents a heterogeneous collection of values. In other words, tuples enable storing multiple fields of different types. Tuples can also be passed as parameters to functions.

Syntax

var tuple_name = [value1,value2,value3,…value n]

For Example

var mytuple =[10,"Hello"];

You can also declare an empty tuple in Typescript and choose to initialize it later.

var mytuple =[]; 
mytuple[0]=120 
mytuple[1]=234

Accessing values in Tuples

Tuple values are individually called items. Tuples are index based. This means that items in a tuple can be accessed using their corresponding numeric index. Tuple item’s index starts from zero and extends up to n-1(where n is the tuple’s size).

Syntax

tuple_name[index]

Example: Simple Tuple

var mytuple =[10,"Hello"];//create a  tuple console.log(mytuple[0])console.log(mytuple[1])

In the above example, a tuple, mytuple, is declared. The tuple contains values of numeric and string types respectively.

On compiling, it will generate the same code in JavaScript.

Its output is as follows −

10 
Hello

Example: Empty Tuple

var tup =[] 
tup[0]=12 
tup[1]=23console.log(tup[0])console.log(tup[1])

On compiling, it will generate the same code in JavaScript.

Its output is as follows −

12 
23 

Tuple Operations

Tuples in TypeScript supports various operations like pushing a new item, removing an item from the tuple, etc.

Example

var mytuple =[10,"Hello","World","typeScript"];console.log("Items before push "+mytuple.length)// returns the tuple size 

mytuple.push(12)// append value to the tuple console.log("Items after push "+mytuple.length)console.log("Items before pop "+mytuple.length)console.log(mytuple.pop()+" popped from the tuple")// removes and returns the last itemconsole.log("Items after pop "+mytuple.length)

• The push() appends an item to the tuple
• The pop() removes and returns the last value in the tuple

On compiling, it will generate the same code in JavaScript.

The output of the above code is as follows −

Items before push 4 
Items after push 5 
Items before pop 5 
12 popped from the tuple 
Items after pop 4

Updating Tuples

Tuples are mutable which means you can update or change the values of tuple elements.

Example

var mytuple =[10,"Hello","World","typeScript"];//create a  tuple console.log("Tuple value at index 0 "+mytuple[0])//update a tuple element 
mytuple[0]=121console.log("Tuple value at index 0 changed to   "+mytuple[0])

On compiling, it will generate the same code in JavaScript.

The output of the above code is as follows −

Tuple value at index 0 10 
Tuple value at index 0 changed to 121

Destructuring a Tuple

Destructuring refers to breaking up the structure of an entity. TypeScript supports destructuring when used in the context of a tuple.

Example

var a =[10,"hello"]var[b,c]= a 
console.log( b )console.log( c )

On compiling, it will generate following JavaScript code.

//Generated by typescript 1.8.10var a =[10,"hello"];var b = a[0], c = a[1];console.log(b);console.log(c);

Its output is as follows −

10 
hello