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 initiapze it later.

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

Accessing values in Tuples

Tuple values are inspanidually 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 compipng, 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 compipng, it will generate the same code in JavaScript.

Its output is as follows −

12 
23 

Tuple Operations

Tuples in TypeScript supports various operations pke 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 compipng, 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 compipng, 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 compipng, 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