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
We can create a tuple using JavaScripts array syntax:
const tupleName =[value1, value2, value3,...valueN]But we need to declare its type as a tuple.
const tupleName:[type1, type2, type3,...typeN]=[value1, value2, value3,...valueN]For Example
const myTuple:[number,string]=[10,"Hello"];You can define a tuple first and then initialize,
let myTuple:[number,string];// declaring the tuple
myTuple =[10,"Hello"];// initializing the tupleMake sure, the const tuple declared must be initialized.
You can also declare an empty tuple in Typescript and choose to initialize it later.
var myTuple =[];
myTuple[0]=10;
myTuple[1]="Hello";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 items index starts from zero and extends up to n-1(where n is the tuples size).
Syntax
Following is the syntax to access the values in a tuple using its index −
tupleName[index]Example: Simple Tuple
Open Compiler
var myTuple:[number,string]=[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 following code in JavaScript.
var myTuple =[10,"Hello"];//create a tuple
console.log(myTuple[0]);
console.log(myTuple[1]);Its output is as follows −
10 Hello
Example: Empty Tuple
We can declare an empty tuple as follows and then initialize it.
Open Compiler
var tup =[]
tup[0]=12
tup[1]=23console.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
Open Compiler
var myTuple:[number,string,string,string];
myTuple =[10,"Hello","World","typeScript"];console.log("Items before push "+ myTuple.length)
myTuple.push(12)// append value to the tuple console.log("Items after push "+ myTuple.length)console.log("Items before pop "+ myTuple.length)// removes and returns the last itemconsole.log(myTuple.pop()+" popped from the tuple")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 following code in JavaScript.
var myTuple;
myTuple =[10,"Hello","World","typeScript"];
console.log("Items before push "+ myTuple.length);
myTuple.push(12);// append value to the tuple
console.log("Items after push "+ myTuple.length);
console.log("Items before pop "+ myTuple.length);// removes and returns the last item
console.log(myTuple.pop()+" popped from the tuple");
console.log("Items after pop "+ myTuple.length);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
Open Compiler
var myTuple:[number,string,string,string];// define tuple
myTuple =[10,"Hello","World","typeScript"];// initialize tupleconsole.log("Tuple value at index 0 "+ myTuple[0])//update a tuple element
myTuple[0]=121console.log("Tuple value at index 0 changed to "+ myTuple[0])On compiling, it will generate the following code in JavaScript.
var myTuple;// define tuple
myTuple =[10,"Hello","World","typeScript"];// initialize 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]);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
Open Compiler
var a:[number,string]=[10,"hello"];var[b, c]= a;console.log( b );console.log( c );On compiling, it will generate following JavaScript code.
var a =[10,"hello"];var b = a[0], c = a[1];
console.log(b);
console.log(c);Its output is as follows −
10
hello
Function Parameters and Tuple Types
We can define a function to accept explicitly a tuple type. So while calling the function we pass the tuple as argument.
Example
Open Compiler
functionprocessData(data:[string,number]):void{const[name, age]= data;console.log(Name: ${name}, Age: ${age});}let data:[string,number]=["John",32]processData(data);We defined here a function processData() that accepts a parameter of tuple type. Inside the function we use tuple destructuring to get the constituent elements. We call the function passing a tuple as argument.
On compiling, it will generate the following JavaScript code.
functionprocessData(data){const[name, age]= data;
console.log(Name: ${name}, Age: ${age});}let data =["John",32];processData(data);</code></pre>
The output of the above code is as follows −
Name: John, Age: 32
