How does tuple destructuring work in TypeScript?

In TypeScript, a tuple is an object which contains the values of different data types. The length of a tuple is always pre-defined. It is similar to an array, but the array contains the values of only one data type, and the tuple contains values of multiple data types.

Destructuring the tuple means getting the values from the tuple in separate variables. For example, we need to use tuple values multiple times in the code block. We can get all values in separate variables and use variables whenever we require tuple values, rather than every time accessing values from tuple via index.

Syntax

Users can follow the syntax below for the tuple destructuring in TypeScript.

type sample_tuple_type = [string, number];
let sample_tuple: sample_tuple_type = ["Default", 24];
let [value1, value2] = sample_tuple;

We have created the type using the type keyword in the above syntax. After that, we created the tuple of type sample_tuple_type. Next, we destructured the tuple and got the tuple values in the value1 and value2 variables.

Now, let’s look at the different examples to learn about tuple destructuring in TypeScript.

Example 1

In the example below, we have created the type for the tuple. We can create the tuples of type tuple_type. The tuple1 contains the five different values according to tuple_type.

After that, we created the five variables named var1, var2, etc., and stored the tuple values in that variables after destructuring the tuple1. Users can observe in the output that var1 variables contain the values from the 0^th index of the tuple and the same for other variables.

type tuple_type = [boolean, number, string, number, boolean];
let tuple1: tuple_type = [true, 23, "Hi", 90, false];
let [var1, var2, var3, var4, var5] = tuple1;
console.log("The values of tuple variables are");
console.log(var1);
console.log(var2);
console.log(var3);
console.log(var4);
console.log(var5);

On compiling, it will generate the following JavaScript code −

var tuple1 = [true, 23, "Hi", 90, false];
var var1 = tuple1[0], var2 = tuple1[1], var3 = tuple1[2], var4 = tuple1[3], var5 = tuple1[4];
console.log("The values of tuple variables are");
console.log(var1);
console.log(var2);
console.log(var3);
console.log(var4);
console.log(var5);

Output

The above code will produce the following output −

The values of tuple variables are
true
23
Hi
90
false

Example 2

In this example, tuple2 is also of tuple_type, but it contains only three values of number and string types. After that, we declared the num1 and num2 variables to store the number values from the tuple to variables while destructuring the tuples.

Users can see how we have skipped the value from the tuple while destructuring. So, we can take only the required values from the tuple while destructuring the tuple. The num1 contains the value from the 0^th index, and the num2 variable contains the value from the 2^nd index of the tuple. We have skipped the tuple value from 1^st index.

// defining the tuple type
type tuple_type = [number, string, number];
// creating the tuple
let tuple2: tuple_type = [56, "TutorialsPoint", 32];
// defining some variables
let num1: number = 0;
let num2: number = 0;

//  destructuring the tuple2
[num1, , num2] = tuple2;

console.log("The number values of tuples are");
console.log(num1);
console.log(num2);

On compiling, it will generate the following JavaScript code −

// creating the tuple
var tuple2 = [56, "TutorialsPoint", 32];

// defining some variables
var num1 = 0;
var num2 = 0;

//  destructuring the tuple2
num1 = tuple2[0], num2 = tuple2[2];
console.log("The number values of tuples are");
console.log(num1);
console.log(num2);

Output

The above code will produce the following output −

The number values of tuples are
56
32

Example 3

In the example below, a tuple contains around nine values. So, rather than creating nine variables to store the tuple values, we have stored the three values in a different variable and six in one single variable.

We have used the spread operator to get the last six values in the otherValues variable. In the output, users can see that the otherValues variable is an array containing six elements.

So, users can destructure the tuple in arrays also in this way using the spread operator.

type data_type = [
   number,
   number,
   string,
   string,
   string,
   boolean,
   number,
   string,
   number
];

let data_tuple: data_type = [
   43,
   56,
   "TypeScript",
   "JS",
   "TutorialsPoint",
   false,
   67,
   "TS",
   90,
];

// otherValues variable stores all remaining values
let [number1, number2, string1, ...otherValues] = data_tuple;

console.log(number1);
console.log(number2);
console.log(string1);
console.log(otherValues);

On compiling, it will generate the following JavaScript code −

var data_tuple = [
   43,
   56,
   "TypeScript",
   "JS",
   "TutorialsPoint",
   false,
   67,
   "TS",
   90,
];
// otherValues variable stores all remaining values
var number1 = data_tuple[0], number2 = data_tuple[1], string1 = data_tuple[2], otherValues = data_tuple.slice(3);
console.log(number1);
console.log(number2);
console.log(string1);
console.log(otherValues);

Output

The above code will produce the following output −

43
56
TypeScript
[ 'JS', 'TutorialsPoint', false, 67, 'TS', 90 ]

Example 4

The example below demonstrates the creation of a tuple with optional properties and destructuring of them in multiple variables. In the optional_tuple, the last element is optional. So, tuple5 contains only two elements.

The values of variable6 are undefined in the output as tuple5 contains only two values.

// last values is optional in tuple
type optional_tuple = [string, number, number?];

// creating tuples with and without optional parameters
let tuple4: optional_tuple = ["Hello", 89, 90];
let tuple5: optional_tuple = ["Hi", 76];

// destructuring the tuple4
let [variable1, variable2, variable3] = tuple4;
console.log("Tuple4 values are");
console.log(variable1);
console.log(variable2);
console.log(variable3);

// destructuring the tuple5
let [variable4, variable5, variable6] = tuple5;
console.log("Tuple5 values are");
console.log(variable4);
console.log(variable5);
console.log(variable6);

On compiling, it will generate the following JavaScript code −

// creating tuples with and without optional parameters
var tuple4 = ["Hello", 89, 90];
var tuple5 = ["Hi", 76];

// destructuring the tuple4
var variable1 = tuple4[0], variable2 = tuple4[1], variable3 = tuple4[2];
console.log("Tuple4 values are");
console.log(variable1);
console.log(variable2);
console.log(variable3);

// destructuring the tuple5
var variable4 = tuple5[0], variable5 = tuple5[1], variable6 = tuple5[2];
console.log("Tuple5 values are");
console.log(variable4);
console.log(variable5);
console.log(variable6);

Output

The above code will produce the following output −

Tuple4 values are
Hello
89
90
Tuple5 values are
Hi
76
undefined

In this tutorial, users learned how to destructure the tuples. In the first example, we learned normal tuple destructuring, and the second example demonstrated skipping the values from the tuple while destructing. From the third example, we can learn to destructure tuple values in the array, and from the last example, we can learn to destructure the tuple with optional values.