❮ Ts Union Ts Class ❯

TypeScript Tuples

We know that the data types of elements in an array are generally the same (an array of type any[] can have different types). If you need to store elements of different data types, you should use a tuple.

Tuples allow storage of elements of different types, and tuples can be passed as parameters to functions.

The syntax for creating a tuple is as follows:

var tuple_name = [value1, value2, value3, …value n]

Example

Declare and initialize a tuple:

var mytuple = [10, "tutorialpro"];

Or we can declare an empty tuple first and then initialize it:

var mytuple = [];
mytuple[0] = 120
mytuple[1] = 234

Accessing Tuple Elements

Elements in a tuple are accessed using their index. The index of the first element is 0, the second is 1, and so on, up to the nth element which is n-1. The syntax is as follows:

tuple_name[index]

Example

The following example defines a tuple containing elements of both number and string types:

var mytuple = [10, "tutorialpro"]; // Create a tuple
console.log(mytuple[0]);
console.log(mytuple[1]);

Compiling the above code yields the following JavaScript:

var mytuple = [10, "tutorialpro"]; // Create a tuple
console.log(mytuple[0]);
console.log(mytuple[1]);

The output is:

10
tutorialpro

Tuple Operations

We can use the following two functions to add or remove elements from a tuple:

push() adds an element to the end of the tuple.
pop() removes the last element from the tuple and returns it.

Example

var mytuple = [10, "Hello", "World", "typeScript"];
console.log("Number of elements before adding: " + mytuple.length); // Returns the size of the tuple

mytuple.push(12); // Add to the tuple
console.log("Number of elements after adding: " + mytuple.length);
console.log("Number of elements before removing: " + mytuple.length);
console.log(mytuple.pop() + " element removed from the tuple"); // Remove and return the removed element

console.log("Number of elements after removing: " + mytuple.length);

Compiling the above code yields the following JavaScript:

var mytuple = [10, "Hello", "World", "typeScript"];
console.log("Number of elements before adding: " + mytuple.length); // Returns the size of the tuple
mytuple.push(12); // Add to the tuple
console.log("Number of elements after adding: " + mytuple.length);
console.log("Number of elements before removing: " + mytuple.length);
console.log(mytuple.pop() + " element removed from the tuple"); // Remove and return the removed element
console.log("Number of elements after removing: " + mytuple.length);

The output is:

Number of elements before adding: 4
Number of elements after adding: 5
Number of elements before removing: 5
12 element removed from the tuple
Number of elements after removing: 4

Updating Tuples

Tuples are mutable, which means we can update or change the values of tuple elements:

Example

var mytuple = [10, "tutorialpro", "Taobao", "Google"]; // Create a tuple
console.log("The first element of the tuple is: " + mytuple[0]);

// Update the tuple element
mytuple[0] = 121;
console.log("The first element of the tuple is updated to: " + mytuple[0]);

Compiling the above code yields the following JavaScript:

var mytuple = [10, "tutorialpro", "Taobao", "Google"]; // Create a tuple
console.log("The first element of the tuple is: " + mytuple[0]);
// Update the tuple element
mytuple[0] = 121;
console.log("The first element of the tuple is updated to: " + mytuple[0]);

The output is:

The first element of the tuple is: 10
The first element of the tuple is updated to: 121

Destructuring Tuples

We can also assign tuple elements to variables, as shown below:

Example

var a = [10, "tutorialpro"];
var [b, c] = a;
console.log(b);
console.log(c);

Compiling the above code yields the following JavaScript:

var a = [10, "tutorialpro"];
var b = a[0], c = a[1];
console.log(b);
console.log(c);

The output is:

10
tutorialpro

❮ Ts Union Ts Class ❯