TypeScript Tuples

We know that arrays in TypeScript can store values of the same data type, but we use tuples in TypeScript when we need a fixed number of elements with specific types at specific positions. Arrays cannot enforce specific types at fixed positions, therefore TypeScript provides a data type called a tuple for this purpose. A tuple is a data type that can be used like any other variable. It represents a heterogeneous collection of values and can also be passed as parameters to a function.

In abstract mathematics, the term tuple is used to denote a multi-dimensional coordinate system. JavaScript does not have tuples as a data type, but tuples are available in TypeScript. The order of elements in a tuple is important.

Syntax

Explanation:

In the above syntax:

• let: It is a keyword which is used to declare a variable.
• tuple_name: It is the name of the tuple.
• [type1, type2, type3]: It defines the fixed number of elements in the tuple and their respective data types.
• [val1, val2, val3]: These are the elements stored in the tuple, where each position has a predefined data type.

Example:

Let's have an example to understand this.

Code:

Output:

[101, 'Tpointtech', 105, 'Abhishek']

Explanation:

In the above example, we defined a variable named arrTuple using the let keyword. It contains values of specific types in a fixed order, i.e., number, string, number, string. The console.log(arrTuple)  statement prints the whole tuple.

Declaration and Initialization

We can declare and initialize tuples separately. The tuple is first declared as an empty array before the values are assigned.

Example:

The example given below will help you to understand this.

Code:

Output:

[ 501, 506, 'hello', 'TypeScript' ]

Explanation:

In the above example, we defined a tuple named myArrTuple using the let keyword. The declared tuple must contain exactly four elements: two numbers and two strings. Here, the tuple is initialized with the values [0, 0, "", ""], which also explicitly enforces the defined types. Each element in the tuple can later be updated with values of the correct type. The console.log(myArrTuple) statement prints the elements of the tuple in order.   

We can read or access the elements of a tuple by using the index, similar to an array. In a tuple, indexing starts from zero.

Example:

Let's have an example to understand this.

Code:

Output:

Name of the Employee is Rohit Sharma
Age of the Employee is 25
Rohit Sharma is working at Tpointtech

Explanation:

In the above example, we declared a tuple with fixed types and order. The empTuple is declared as a tuple of type [string, number, string] which means it must have exactly three elements: the first element should be a string, the second element should be a number and the third element should be a string.

We are accessing elements by their index position. Here, the first console.log statement accesses the first element, the second console.log statement accesses the second element and the third console.log statement accesses the third element from the tuple.

Operations on Tuples

The developer frequently uses these two operations on a tuple:

push() Method

The push() operation is used to add an element to the tuple, but tuples are primarily meant to have a fixed size and fixed types. While technically we can utilize the push() method on a tuple, but it is not recommended because it can break type safety in strictly typed tuples.

Example:

Let us have a look at this example.

Code:

Output:

Items: Rohit Sharma,25,Tpointtech
Length of Tuple Items before push: 3
Length of Tuple after push: 4
Items: Rohit Sharma,25,Tpointtech,10001

Explanation:

In the above example, we declared empTuple as a tuple which contains two strings named "Rohit Sharma" and "Tpointtech" and a number value 25. In TypeScript, when we do not specify a tuple type then it is treated as a general array at runtime. The console.log("Items: " + empTuple) prints all the elements in empTuple as a comma-separated string. The console.log("Length of Tuple Items before push: "+empTuple.length) returns the current number of elements that is 3. The emTuple.push(10001) pushes an element to the end of the tuple. The console.log("Length of Tuple Items after push: " + empTuple.length) returns the new length after pushing an element. The console.log("Items: " + empTuple) prints the updated array as a string.

pop() Method

In TypeScript, we can call the pop() method on a tuple because tuples are arrays at runtime, but it is not recommended because tuples are meant to have a fixed length and calling pop() breaks type safety.

Example:

Here's an example to illustrate this.

Code:

Output:

Items: [ 'Rohit Sharma', 25, 'Tpointtech', 10001 ]
Length of Tuple Items before pop: 4
Length of Tuple Items after pop: 3
Items: [ 'Rohit Sharma', 25, 'Tpointtech' ]

Explanation:

In this example, a tuple named empTuple with the type [string, number, string, number] represents an employee's name, age, company, and ID. Tuples have a fixed length and specific types for each element. Initially, the tuple empTuple contains 4 elements. The console.log("Length of Tuple Items after pop:", empTuple.length) returns the length of the tuple. The empTuple.pop() removes the last element (10001). After popping, the length of the tuple becomes 3. The console.log("Items:", empTuple) returns Items: [ 'Rohit Sharma', 25, 'Tpointtech' ].

Note: It is allowed to use .pop() on tuples at runtime but it is conceptually discouraged because it alters the fixed-length structure.

Heterogeneous Data Types in Tuples

In TypeScript, a tuple allows elements of different types in a single structure, such as numbers and strings simultaneously.

Example:

Here's an example to illustrate this.

Code:

Output:

Name of the Employee is Supriya Singh
Age of the Employee is 22
Supriya Singh is known for honesty

Explanation:

In the above example, a tuple named myEmpTuple is declared using the let keyword. This tuple contains three elements: string, number, string. Here, the first console.log statement prints the employee name, the second statement prints the age and the third statement prints a message by combining the string values.

Update or Modify Tuple Elements

Tuples are mutable, which means we can update or change the values of tuple elements. To modify the fields of a tuple, we need to use the index of the fields and the assignment operator.

Example:

We can understand it with the following example.

Code:

Output:

Name of the Employee is Rohit Sharma
Age of the Employee is 30
Rohit Sharma is working at TpointTech

Explanation:

In the above example, we declared a tuple named myEmpTuple. The tuple type [string, number, string] means the first value should be a string, the second value should be a number and the third value must be a string. The values must be provided in the same order as the defined types. The value at myEmpTuple[1] is modified using its index position.

The first console.log statement accesses the first element of the tuple and displays the employee's name. The second console.log statement accesses the second element of the tuple and displays the updated age and the third console.log statement combines the employee's name and company's name and prints the result on the console.

Passing Tuples to Functions

In TypeScript, we can pass a Tuple as an argument to a function. The function parameter is defined with a tuple type, ensuring that the function receives a fixed number of elements in a specific order and with specific data types.

Example:

Let's have an example to understand this.

Code:

Output:

TpointTech
101
Abhishek

Explanation:

In the above example, a tuple named empTuple is declared. The type [string, number, string] specifies that the first value must be a string, the second value must be a number, and the third value must be a string.

The function named display is defined to take a parameter tuple_values whose type is any[]. Here, any[] means the array can contain values of any type. Inside the function, a loop iterates over each element of the tuple. The expression tuple_values.length gives the total number of elements in the tuple. The statement console.log(tuple_values[i]) prints each element to the console one by one.

Tuple Creation in TypeScript

Let's have an example to understand tuple creation in TypeScript.

Code:

Output:

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

Explanation:

In the above example, we demonstrated the use of a tuple in TypeScript. A tuple allows us to store multiple values of different data types in a fixed order. We declared a tuple named studentTuple. Its type [number, string, string, number, string, string] defines the exact sequence of data types which means that TypeScript enforces both the type and the order of elements in the tuple. The console.log(studentTuple) prints all the elements as a single array.

Destructuring a Tuple

Destructuring allows us to break the structure of a tuple. TypeScript uses destructuring to access elements easily.

Example:

Let's have an example to understand this.

Code:

Output:

Rohit Sharma
25
Tpointtech

Explanation:

In the above code, we created a tuple named empTuple which contains three values: a string Rohit Sharma, a number 25 and a string Tpointtech. Here, we use tuple destructuring to extract these values into separate variables and log the result to the console.

Conclusion

In this article, we have covered everything about TypeScript Tuples. TypeScript tuples are ordered and fixed-size collections of heterogeneous elements. They provide us with type safety, allow index-based access and modification, and support destructuring and function passing. It makes them more structured than regular arrays.