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