元组在 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 个索引的值。我们从第一个索引跳过了元组值。
// 定义元组类型
type tuple_type = [number, string, number];
// 创建元组
let tuple2: tuple_type = [56, "TutorialsPoint", 32];
// 定义一些变量
let num1: number = 0;
let num2: number = 0;
// 解构 tuple2
[num1, , num2] = tuple2;
console.log("The number values of tuples are");
console.log(num1);
console.log(num2);
编译后，它将生成以下 JavaScript 代码 -
// 创建元组
var tuple2 = [56, "TutorialsPoint", 32];
// 定义一些变量
var num1 = 0;
var num2 = 0;
// 解构 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
在下面的示例中，一个元组包含大约 9 个值。因此，我们不是创建 9 个变量来存储元组值，而是将三个值存储在不同的变量中，将六个值存储在一个变量中。
我们使用扩展运算符获取 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 变量存储所有剩余的值 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 变量存储所有剩余的值 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 仅包含两个元素。
由于tuple5仅包含两个值，因此输出中未定义variable6的值。
// 元组中的最后一个值是可选的
typeoptional_tuple = [string, number, number?];
// 创建带有和不带有可选参数的元组
let tuple4:optional_tuple = ["Hello", 89, 90];
let tuple5:optional_tuple = ["Hi", 76];
// 解构tuple4
let [variable1, variable2, variable3] = tuple4;
console.log("Tuple4 values are");
console.log(variable1);
console.log(variable2);
console.log(variable3);
// 解构 tuple5
let [variable4, variable5, variable6] = tuple5;
console.log("Tuple5 values are");
console.log(variable4);
console.log(variable5);
console.log(variable6);
编译后，它将生成以下 JavaScript 代码 -
// 创建带有和不带有可选参数的元组
var tuple4 = ["Hello", 89, 90];
var tuple5 = ["Hi", 76];
// 解构 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);
// 解构 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
在本教程中，用户学习了如何解构元组。在第一个示例中，我们学习了常规元组解构，第二个示例演示了在解构时跳过元组中的值。从第三个示例中，我们可以学习解构数组中的元组值，从最后一个示例中，我们可以学习解构具有可选值的元组。
