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.
var tuple_name = [value1,value2,value3,...value n]

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

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).
tuple_name[index]

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

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 

Tuples in TypeScript supports various operations like pushing a new item, removing an item from the tuple, etc.
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 push() appends an item to the tuple
The pop() removes and returns the last value in 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

Tuples are mutable which means you can update or change the values of tuple elements.
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 refers to breaking up the structure of an entity. TypeScript supports destructuring when used in the context of a tuple.
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 


    45 Lectures 
     4 hours 

 Antonio Papa

    41 Lectures 
     7 hours 

 Haider Malik

    60 Lectures 
     2.5 hours 

 Skillbakerystudios

    77 Lectures 
     8 hours 

 Sean Bradley

    77 Lectures 
     3.5 hours 

 TELCOMA Global

    19 Lectures 
     3 hours 

 Christopher Frewin
 Print
 Add Notes
 Bookmark this page