TypeScript Tuples - GeeksforGeeks

11 Apr, 2022
As we know array consists of values of homogeneous (same) types but sometimes when we need to store a collection of a different types values in a single variable, then we will go with Tuples. They are just like structure in C programming and can also be passed as parameters in a function call. Tuples may be one or more than one types of data (like number with string or string with number and so on).
To denote a multi-dimensional coordinate system the term used is tuple in abstract mathematics.
In JavaScript we doesn’t have tuples as data types, but in typescript Tuples facility is available.
Syntax
let tuple_name = [val1, val2, val3, ...val n];  
Example:
let arrTuple = [501, "welcome", 505, "Mohan"];  
console.log(arrTuple);
Output:
[501, ‘welcome’, 105, ‘Mohan’]
Declaration and initialization of a tuple separately by initially declaring the tuple as an empty tuple in Typescript. Example:
let arrTuple = [];   
arrTuple[0] = 501  
arrTuple[1] = 506 
Accessing tuple Elements With the help of index basis we can read or access the fields of a tuples, which is the same as an array. An index starts from zero too. 
Example:
var employee: [number, string] = [1, "Steve"];
employee[0]; // returns 1
employee[1]; / return Steve
Output:
1 Steve
We can declare heterogenous datatypes in tuples like: number and string simultaneously.
 Example
let empTuple = ["Vivek Singh", 22, "Honesty"];  
console.log("Name of the Employee is : "+empTuple [0]);  
console.log("Age of the Employee is : "+empTuple [1]);  
console.log(empTuple [0]+" is workinging in "+empTuple [2]);  
Output:
Name of the Employee is : Vivek Singh Age of the Employee is : 22 Vivek Singh is workinging in Microsoft
Operations on Tuple A tuple has two operations:
Push()
Pop()
Push() To add an element to the tuple with push operation. Example
var employee: [number, string] = [1, "Steve"];
employee.push(2, "Bill"); 
console.log(employee); 
Output:
[1, ‘Steve’, 2, ‘Bill’]
This type of declaration is allowed in tuples because we are adding number and string values to the tuple and they are valid for the employee tuple. 
Example
let empTuple = ["Vivek Singh", 22, "Honesty"];  
console.log("Items: "+empTuple);   // here we print tuple elements
empTuple.push(10001);   // append value to the tuple   
console.log("Length of Tuple Items after push: "+empTuple.length);  // After pushing elements in tuples calculate length of tuples.
console.log("Items: "+empTuple);  
Output:
Items: Vivek Singh, 22, Honesty Length of Tuple Items after push: 4 Items: Vivek Singh, 22, Honesty, 10001
To add an element to the tuple with push operation. 
Example
let empTuple = ["Mohit Singh", 25, "geeksforgeeks", 10001];  
console.log("Items: "+empTuple);   // here we print tuple elements
empTuple.pop();   // removed value to the tuple   
console.log("Length of Tuple Items after pop: "+empTuple.length);  After pushing elements in tuples calculate length of tuples.
console.log("Items: "+empTuple);  
Output:
Items: Mohit Singh, 25, geeksforgeeks, 10001 Length of Tuple Items after pop: 3 Items: Mohit Singh, 25, geeksforgeeks
Update or Modify the Tuple Elements We need to use the index of the fields and assignment operator for modifying the fields of tuple. It can be shown in the following example. Example
let empTuple = ["Ganesh Singh", 25, "TCS"];  
empTuple[1] = 60;  
console.log("Name of the Employee is: "+empTuple [0]);  
console.log("Age of the Employee is: "+empTuple [1]);  
console.log(empTuple [0]+" is workinging in "+empTuple [2]); 
Output:
Name of the Employee is: Ganesh Singh Age of the Employee is: 60 Ganesh Singh is workinging in TCS
Clear the fields of a Tuple Fields could be cleared but we cannot delete the tuple variables. To clear the fields of a tuple, assign it with an empty tuple field set as shown below:
let empTuple = ["Rohit Sharma", 25, "JavaTpoint"];  
empTuple = [];  
console.log(empTuple); 
Output:
[]
In TypeScript, To break up the structure of an entity by destructuring. 
Example
let empTuple = ["Rohit Sharma", 25, "JavaTpoint"];  
let [emp, student] = empTuple;  
console.log(emp);  
console.log(student);  
Rohit Sharma 25
Passing Tuple to Functions
//Tuple Declaration  
let empTuple = ["JavaTpoint", 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);
JavaTpoint 101 Abhishek
Following shown is the code snippet which will help us to understand Tuple creation in TypeScript:-
Example:
Javascript
let student_details : [number, string, string] = [1 , "Aman" , "CSE"];student_details.push(2 , "Ram" , "CSE"); console.log(student_details); // This code is contributed by Aman Singla...
Output:
[ 1, 'Aman', 'CSE', 2, 'Ram', 'CSE' ]
amansingla
TypeScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
How to create footer to stay at the bottom of a Web page?
Differences between Functional Components and Class Components in React
Node.js fs.readFileSync() Method
How to set the default value for an HTML <select> element ?
File uploading in React.js
How to set input type date in dd-mm-yyyy format using HTML ?