An array is designed to contain several values of a uniform data type. However, there are instances where it becomes necessary to keep a set of values of varying data types within a single variable. While arrays do not support this capability, TypeScript offers a data type known as Tuple to fulfill this requirement. A Tuple functions as an array that holds multiple fields, each associated with different data types. This concept is comparable to structures found in the C programming language.
A tuple is a data structure that functions similarly to other variable types. It denotes a diverse set of values and can additionally be utilized as arguments in a function invocation.
In abstract mathematics, the concept of a tuple refers to a multi-dimensional coordinate framework. While JavaScript lacks a dedicated tuple data type, TypeScript provides support for tuples. The sequence of elements within a tuple holds significance.
Syntax
let tuple_name = [val1,val2,val3, ...val n];
Example
let arrTuple = [101, "TypeScript Tutorial", 105, "Abhishek"];
console.log(arrTuple);
Output:
[101, 'TypeScript Tutorial', 105, 'Abhishek']
In TypeScript, it is possible to declare and initialize a tuple separately by first defining the tuple as an empty tuple.
Example
let arrTuple = [];
arrTuple[0] = 101
arrTuple[1] = 105
Accessing tuple Elements
Accessing or reading the elements of a tuple can be accomplished through their index, similar to how it is done with an array. In a tuple, indexing begins at zero.
Example
let empTuple = ["Rohit Sharma", 25, "TypeScript Tutorial"];
console.log("Name of the Employee is : "+empTuple [0]);
console.log("Age of the Employee is : "+empTuple [1]);
console.log(empTuple [0]+" is working in "+empTuple [2]);
Output:
Name of the Employee is: Rohit Sharma
Age of the Employee is: 25
Rohit Sharma is working in TypeScript Tutorial
Operations on Tuple
A tuple supports two primary functions:
- Push
- Pop
Push
The operation known as push is utilized to insert an element into the tuple.
Example
let empTuple = ["Rohit Sharma", 25, "TypeScript Tutorial"];
console.log("Items: "+empTuple);
console.log("Length of Tuple Items before push: "+empTuple.length); // returns the tuple size
empTuple.push(10001); // append value to the tuple
console.log("Length of Tuple Items after push: "+empTuple.length);
console.log("Items: "+empTuple);
Output:
Items: Rohit Sharma, 25, TypeScript Tutorial
Length of Tuple Items before push: 3
Length of Tuple Items after push: 4
Items: Rohit Sharma, 25, TypeScript Tutorial, 10001
Pop
The pop function serves to eliminate an element from the tuple.
Example
let empTuple = ["Rohit Sharma", 25, "TypeScript Tutorial", 10001];
console.log("Items: "+empTuple);
console.log("Length of Tuple Items before pop: "+empTuple.length); // returns the tuple size
empTuple.pop(); // removed value to the tuple
console.log("Length of Tuple Items after pop: "+empTuple.length);
console.log("Items: "+empTuple);
Output:
Items: Rohit Sharma,25, TypeScript Tutorial, 10001
Length of Tuple Items before pop: 4
Length of Tuple Items after pop: 3
Items: Rohit Sharma, 25, TypeScript Tutorial
Update or Modify the Tuple Elements
Tuples are mutable, indicating that the values of their elements can be updated or altered. To change the components of a tuple, it is necessary to employ the index of the elements along with the assignment operator. This can be illustrated through the following example.
Example
let empTuple = ["Rohit Sharma", 25, "TypeScript Tutorial"];
empTuple[1] = 30;
console.log("Name of the Employee is: "+empTuple [0]);
console.log("Age of the Employee is: "+empTuple [1]);
console.log(empTuple [0]+" is working in "+empTuple [2]);
Output:
Name of the Employee is: Rohit Sharma
Age of the Employee is: 30
Rohit Sharma is working in TypeScript Tutorial
Clear the fields of a Tuple
While we are unable to delete the tuple variable itself, we can clear its fields. To achieve this, one can assign the tuple to an empty set of tuple fields, as demonstrated in the example below.
Example
let empTuple = ["Rohit Sharma", 25, "TypeScript Tutorial"];
empTuple = [];
console.log(empTuple);
Output:
Destructuring the Tuple
Destructuring enables the disassembly of an entity's structure. In TypeScript, destructuring is applied within the framework of a tuple.
Example
let empTuple = ["Rohit Sharma", 25, "TypeScript Tutorial"];
let [emp, student] = empTuple;
console.log(emp);
console.log(student);
Output:
Rohit Sharma
25
Passing Tuple to Functions
A tuple can be supplied to functions, as demonstrated in the following example.
Example
//Tuple Declaration
let empTuple = ["TypeScript Tutorial", 101, "Abhishek"];
//Passing tuples in function
function display(tuple_values:any[]) {
for(let i = 0;i<empTuple.length;i++) {
console.log(empTuple[i]);
}
}
//Calling tuple in function
display(empTuple);
Output:
TypeScript Tutorial
101
Abhishek