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 tuples 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
Next Topic:-Click Here