How tuple destructuring works in TypeScript ?

Last Updated : 16 Jun, 2022

Tuples in TypeScript are basically a simple Array with definite length and definite Data-type. Destructuring means breaking the structure. In this article we will see how Destructuring of tuple in TypeScript work.

Destructuring is simply breaking up into part and assigning to variables. Tuple elements are breaking into it’s part. we can break the Tuple with the help of assignment operator.

Example: Simple example of tuple destructuring.

Javascript

// TypeScript Code
 
let Student = [ "Aman", "Arun", "Bimal" ];
let stud1 = Student[0];
let stud2 = Student[1];
let stud3 = Student[2];

In this tuple destructuring we simply manually break the value of tuple and assign it to variable. In destructuring, we basically assign the value of each element of tuple to some variable. This is the basic example of destructuring of a tuple. We have some more destructuring syntax. let see how these work.

How Different Destructuring of Tuple works?

We have one way for tuple destructuring which is as follows:

let Student_roll = [ 1001, 1002, 1003 ];
let [stud1, stud2, stud3 ] = Student_roll;

Above code is equivalent to the following code:

var stud1=1001, stud2=1002, stud3=1003;

We can write the Destructuring of tuple of name of students for variable as student id with the above illustrated approach. This destructuring actually helps in assigning the value of tuple with 0 index to stud1 and so on. At the end it is same as previous code which is of manually assigning the value to variable.

Javascript

// TypeScript Code
 
let Student = [ "Aman", "Arun", "Bimal" ];
let [stud1, stud2, stud3 ] = Student;
 
console.log(stud1);
console.log(stud2);
console.log(stud3);

Output:

Aman
Arun
Bimal

At this point we have no problem but what if destructuring one element at a time with this approach?. Now we will see how ignoring of element work:

We have way to ignore the middle value in destructuring Tuple. Let see how it’s work.

let Student = [ "Aman", "Arun", "Bimal" ];
let [,,stud3 ] = Student;

Here “,” is used for the ignoring the value in tuple. This code is equivalent to following code:

let stud3 = "Bimal";

In this code we are using “,” which is used for ignoring the variable. So if we want to skip the 1st element in tuple we can write code as follow:

Javascript

// TypeScript Code
 
let Student = [ "Aman", "Arun", "Bimal" ];
let [, stud1, stud2 ] = Student;
 
console.log(stud1);
console.log(stud2);

Output: And now if we print the variable stud1 and stud2 It will print follow.

Arun
Bimal

We also have spreading operator in destructuring tuple in TypeScript let’s look how it’s work.

let Student_roll = [ 1001, 1002, 1003 ];
let [...stud3 ] = Student_roll;

Here …stud3 define the slicing of tuple and if we use spread operator with 0 indexed variable in destructuring it slice from the 0 to the end of tuple and assign to the variable. which is equivalent to following code:

let stud3 = Student_roll.slice(0);

We can use this operator to separate the first element and all remaining element and store both of them in different variable. Here it will slice with 1 index value.

Javascript

let Student = [ "Aman", "Arun", "Bimal" ];
let [stud1, ...remaining_class ] = Student;
 
console.log(stud1);
console.log(remaining_class);

Output:

Aman
["Arun", "Bimal"];

Example: In this example we will creating a tuple with the actual TypeScript syntax (including the data types wherever required) and then further will perform the tuple destructuring.

Javascript

let fruits : string[] = ["Apple", "Banana", "Mango"];
let [fruit_1, fruit_2, fruit_3]: string[] = fruits;
 
console.log(fruit_1 + " - " + fruit_2 +  " - " +  fruit_3);
 
//This code is contributed by Aman Singla...