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

在本教程中，使用者學習瞭如何解構元組。在第一個示例中，我們學習了普通的元組解構，第二個示例演示了在解構時跳過元組中的值。從第三個示例中，我們可以學習如何將元組值解構到陣列中，從最後一個示例中，我們可以學習如何解構包含可選值的元組。