TypeScript Tuples

In JavaScript, arrays consist of values of the same type, but sometimes we need to store a collection of values of different types in a single variable. TypeScript offers tuples for this purpose. Tuples are similar to structures in C programming and can be passed as parameters in function calls.

Tuples can contain one or more types of data (e.g., numbers and strings).

Syntax

let tuple_name = [val1, val2, val3, ...val n];  

In the above syntax:

• let: declares the variable.
• tuple_name: the name of the tuple.
• [val1, val2, val3, ...val n]: elements stored in the tuple (can be of different data types).

Now let's understanding this with the help of example:

let arrTuple: [number, string, number, string] = [501, "welcome", 505, "Mohan"];
console.log(arrTuple);

Output

[501, 'welcome', 105, 'Mohan']

In this example:

• arrTuple is a tuple that holds values of specific types in a fixed order → number, string, number, string.
• The values [501, "welcome", 505, "Mohan"] match that type pattern.
• console.log(arrTuple); prints the whole tuple:

Declaration and Initialization

Tuples can be declared and initialized separately. Initially, you can declare the tuple as an empty array.

Example

let arrTuple: [number, number, string, string] = [] as [number, number, string, string];   
arrTuple[0] = 501;
arrTuple[1] = 506;
arrTuple[2] = "hello";
arrTuple[3] = "world";
console.log(arrTuple);

Accessing Tuple Elements

You can access tuple elements using their indices, similar to arrays. Indices start from zero.

Example

var employee: [number, string] = [1, "Steve"];
employee[0];
employee[1];

Output:

1 
Steve

Heterogeneous Data Types in Tuples

Tuples can contain different data types, such as numbers and strings simultaneously.

Example

let empTuple: [string, number, string] = ["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 known for " + empTuple[2]);

Output:

Name of the Employee is : Vivek Singh Age of the Employee is : 22 Vivek Singh is working in Microsoft

Operations on Tuples

Here are the common operations on tuples:

1. Push Operation

The push() method adds elements to the tuple.

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 2:

let empTuple: [string, number, string] = ["Vivek Singh", 22, "Honesty"];
console.log("Items: " + empTuple);
empTuple.push(10001);
console.log("Length of Tuple Items after push: " + empTuple.length);
console.log("Items: " + empTuple);

Output

Items: Vivek Singh, 22, Honesty Length of Tuple Items after push: 4 Items: Vivek Singh, 22, Honesty, 10001

2. Pop Operation

The pop() method removes the last element from the tuple.

Example

let empTuple: [string, number, string, number] = ["Mohit Singh", 25, "GeeksforGeeks", 10001];
console.log("Items: " + empTuple);
empTuple.pop();
console.log("Length of Tuple Items after pop: " + empTuple.length);
console.log("Items: " + empTuple);

Output

Items: Mohit Singh, 25, GeeksforGeeks, 10001Length of Tuple Items after pop: 3Items: Mohit Singh, 25, GeeksforGeeks

Update or Modify Tuple Elements

You can modify tuple elements using their indices and the assignment operator.

Example

let empTuple: [string, number, string] = ["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 working in " + empTuple[2]);

Output

Name of the Employee is: Ganesh Singh
Age of the Employee is: 60
Ganesh Singh is working in TCS

Clear Tuple Fields

You can clear the fields of a tuple by assigning it an empty tuple.

Example:

let empTuple: [string, number, string] = ["Rohit Sharma", 25, "JavaTpoint"];
empTuple = [] as [string, number, string];
console.log(empTuple);

Output

[]

Destructuring Tuples

You can break up the structure of a tuple using destructuring.

Example

let empTuple: [string, number, string] = ["Rohit Sharma", 25, "JavaTpoint"];
let [name, age] = empTuple;
console.log(name);
console.log(age);

Output

Rohit Sharma
25

Passing Tuples to Functions

Tuples can be passed as parameters to functions.

Example

let empTuple: [string, number, string] = ["GeeksforGeeks", 101, "Abhishek"];

function display(tuple_values: any[]) {
  for (let i = 0; i < tuple_values.length; i++) {
    console.log(tuple_values[i]);
  }
}

display(empTuple);

Output

GeeksforGeeks
101
Abhishek

Example: Tuple Creation in TypeScript

let studentTuple: [number, string, string, number, string, string] = [1, 'Aman', 'CSE', 2, 'Ram', 'CSE'];
console.log(studentTuple);

Output

[1, 'Aman', 'CSE', 2, 'Ram', 'CSE']