TypeScript - 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] = 23 

console.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 item
  
console.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] = 121     
console.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.10
var a = [10, "hello"];
var b = a[0], c = a[1];
console.log(b);
console.log(c);

Its output is as follows −

10 
hello