元组解构如何在 TypeScript 中工作？

TypeScript 中的元组是具有确定长度和确定数据类型的简单数组。解构意味着打破结构。在本文中，我们将了解 TypeScript 中元组的解构是如何工作的。

解构只是分解成部分并分配给变量。元组元素正在闯入它的一部分。我们可以在赋值运算符的帮助下打破元组。

示例：元组解构的简单示例。

Javascript

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

在这个元组解构中，我们只需手动破坏元组的值并分配给变量。在解构中，我们基本上将元组的每个元素的值分配给某个变量。这是解构元组的基本示例。我们有一些更多的解构语法。让我们看看这些是如何工作的。

元组的不同解构如何工作？

我们有一种解构元组的方法：

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

上面的代码等价于下面的代码：

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

我们可以使用上述方法将变量的学生姓名元组的解构编写为学生ID。这种解构将具有 0 索引的元组的值分配给 stud1 等等。最后，它与之前手动将值分配给变量的代码相同。

Javascript

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

输出：

Aman
Arun
Bimal

在这一点上，我们没有问题，但如果使用这种方法一次解构一个元素，那它是如何工作的。现在我们将看到忽略元素是如何工作的：

我们有办法在解构元组时忽略中间值。让我们看看它是如何工作的。

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

这里“，”用于忽略元组中的值。此代码等效于以下代码：

let stud3 = "Bimal";

在这段代码中，我们使用“,”来忽略变量。因此，如果我们想跳过元组中的第一个元素，我们可以编写如下代码：

Javascript

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

输出：现在如果我们打印变量 stud1 和 stud2 它将打印如下。

Arun
Bimal

我们在 TypeScript 中也有用于解构元组的扩展运算符，让我们看看它是如何工作的。

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

这里…stud3 定义了元组的切片，如果我们使用带有 0 索引变量的扩展运算符来解构它，从 0 到元组的末尾切片并分配给变量。这相当于以下代码：

let stud3 = Student_roll.slice(0);

我们可以使用此运算符将第一个元素和所有剩余元素分开，并将它们存储在不同的变量中。在这里它将使用 1 个索引值进行切片。

Javascript

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

输出：

Aman
["Arun", "Bimal"];

参考： https://www.typescriptlang.org/docs/handbook/variable-declarations.html#tuple-destructuring