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` 等的变量，并在解构 `tuple1` 后将元组值存储到这些变量中。用户可以在输出中观察到 `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);

编译后，它将生成以下 JavaScript 代码：

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

编译后，它将生成以下 JavaScript 代码：

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

在下面的示例中，元组包含大约九个值。因此，与其创建九个变量来存储元组值，我们将其中的三个值存储在一个不同的变量中，其余六个值存储在一个变量中。

我们使用了扩展运算符将最后六个值放入 `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);

编译后，它将生成以下 JavaScript 代码：

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` 只包含两个元素。

在输出中，`variable6` 的值为 `undefined`，因为 `tuple5` 只包含两个值。

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

编译后，它将生成以下 JavaScript 代码：

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

在本教程中，用户学习了如何解构元组。在第一个示例中，我们学习了普通的元组解构，第二个示例演示了在解构时跳过元组中的值。从第三个示例中，我们可以学习如何将元组值解构到数组中，从最后一个示例中，我们可以学习如何解构包含可选值的元组。