TypeScript 元组析构是如何工作的

在TypeScript中，元组是一个包含不同数据类型的值的对象。元组的长度总是预先定义的。它类似于一个数组，但数组只包含一种数据类型的值，而元组包含多种数据类型的值。

析构 元组意味着在不同的变量中获取元组的值。例如，我们需要在代码块中多次使用元组的值。我们可以在单独的变量中获取所有的值，并在需要元组值时使用变量，而不是每次都通过索引访问元组的值。

语法

用户可以按照下面的语法在TypeScript中对元组进行解构。

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

我们在上面的语法中使用type关键字创建了类型。之后，我们创建了类型为sample_tuple_type的元组。接下来，我们对元组进行解构，在value1和value2变量中得到元组的值。

现在，让我们看看不同的例子来学习TypeScript中的元组结构化。

示例 1

在下面的例子中，我们已经创建了元组的类型。我们可以创建类型为tuple_type的元组。tuple1根据tuple_type包含五个不同的值。

之后，我们创建了五个变量，命名为var1, var2等，并在对元组1进行解构后将元组的值存储在这些变量中。用户可以在输出中观察到，var1变量包含元组的第0个索引的值，其他变量也是如此。

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);

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);

输出

上述代码将产生以下输出 —

The values of tuple variables are
true
23
Hi
90
false

示例 2

在这个例子中，tuple2也是tuple_type的，但是它只包含三个数字和字符串类型的值。之后，我们声明了num1和num2两个变量，以便在对图元进行解构时将图元中的数字值存储到变量中。

用户可以看到我们是如何在解构元组的时候跳过值的。因此，我们可以在对元组进行解构时，只从元组中获取所需的值。num1包含第0个索引的值，而num2变量包含元组第2个索引的值。我们已经跳过了第1个索引的元组值。

// 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);

// 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);

输出

上述代码将产生以下输出 —

The number values of tuples are
56
32

示例 3

在下面的例子中，一个元组包含大约九个值。因此，我们没有创建九个变量来存储元组的值，而是将三个值存储在一个不同的变量中，六个值存储在一个单一的变量中。

我们使用了spread运算符来获取otherValues变量中的最后六个值。在输出中，用户可以看到，otherValues变量是一个包含六个元素的数组。

所以，用户也可以通过这种方式使用传播操作符对数组中的元组进行反结构。

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);

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);

输出

上述代码将产生以下输出 —

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

示例 4

下面的例子演示了创建一个带有可选属性的元组，并在多个变量中对其进行解构。在 optional_tuple 中，最后一个元素是可选的。所以，tuple5只包含两个元素。

变量6的值在输出中是未定义的，因为元组5只包含两个值。

// 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);

// 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);

输出

上述代码将产生以下输出 —

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

在本教程中，用户学习了如何对元组进行析构。在第一个例子中，我们学习了正常的元组去结构，第二个例子演示了在去结构时跳过元组中的值。从第三个例子中，我们可以学习对数组中的元组值进行析构，从最后一个例子中，我们可以学习对带有可选值的元组进行析构。