TypeScript 中的陣列與元組

---

在使用 TypeScript 時，開發人員可以使用各種資料結構來儲存和操作資料。陣列和元組是兩種常用的資料結構。陣列和元組都允許我們儲存多個值，但它們在結構和用法方面有所不同。

在本教程中，我們將探討 TypeScript 中陣列和元組的特性，討論它們的區別，並提供示例來說明它們的應用。

什麼是陣列？

陣列是一種儲存元素集合的資料結構。它是一個有序的值列表，其中每個值都由一個索引標識。TypeScript 中的陣列可以包含相同型別或不同型別的元素組合。我們可以使用方括號宣告陣列，元素之間用逗號分隔。

示例 1

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: string[] = ["apple", "banana", "orange"];
let mixed: (number | string)[] = [1, "two", 3, "four"];
console.log(`The value of numbers is ${numbers}`);
console.log(`The value of fruits is ${fruits}`);
console.log(`The value of mixed is ${mixed}`);

編譯後，它將生成以下 JavaScript 程式碼：

var numbers = [1, 2, 3, 4, 5];
var fruits = ["apple", "banana", "orange"];
var mixed = [1, "two", 3, "four"];
console.log("The value of numbers is ".concat(numbers));
console.log("The value of fruits is ".concat(fruits));
console.log("The value of mixed is ".concat(mixed));

輸出

以上程式碼將產生以下輸出：

The value of numbers is 1,2,3,4,5
The value of fruits is apple,banana,orange
The value of mixed is 1,two,3,four

示例 2

在這裡，我們嘗試刪除 **numbers** 陣列的最後一個元素。

let numbers: number[] = [1, 2, 3, 4, 5];
console.log(numbers.length); // Output: 5
numbers.pop(); // Removing the last element
console.log(numbers); // Output: [1, 2, 3, 4]

編譯後，它將生成以下 JavaScript 程式碼：

var numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // Output: 5
numbers.pop(); // Removing the last element
console.log(numbers); // Output: [1, 2, 3, 4]

輸出

以上程式碼將產生以下輸出：

5
[ 1, 2, 3, 4 ]

什麼是元組？

元組是元素的有限有序列表，其中每個元素可以具有不同的型別。與陣列不同，元組具有固定長度，並且每個元素的型別在宣告時已知。在 TypeScript 中，元組使用方括號表示，每個元素之間用逗號分隔。我們還可以使用型別註釋指定每個元素的型別。

示例 3

let person: [string, number] = ["John", 25];
let point: [number, number, string] = [10, 20, "origin"];
console.log(`The value of person is ${person}`);
console.log(`The value of point is ${point}`);

編譯後，它將生成以下 JavaScript 程式碼：

var person = ["John", 25];
var point = [10, 20, "origin"];
console.log("The value of person is ".concat(person));
console.log("The value of point is ".concat(point));

輸出

以上程式碼將產生以下輸出：

The value of person is John,25
The value of point is 10,20,origin

在上面的示例中，我們聲明瞭兩個元組。**person** 元組包含一個字串元素，後跟一個數字元素。**point** 元組包含兩個數字元素，後跟一個字串元素。

示例 4

在此示例中，我們嘗試向包含字串和數字型別的元組添加布爾輸入 **true**，因此型別為 string | number。這試圖修改資料屬性型別，導致錯誤。

let data: [string, number] = ["Hello", 42];
console.log(data.length); // Output: 2
data.push(true);

var data = ["Hello", 42];
console.log(data.length); // Output: 2
data.push(true);

輸出

我們得到以下編譯時輸出。

2

陣列和元組之間的區別

現在我們已經瞭解了 TypeScript 中陣列和元組的基本定義，讓我們來探討它們之間的區別。

結構

陣列是靈活的，可以容納任意數量的相同或不同型別的元素。它們本質上是動態的，這意味著我們可以在執行時向陣列新增或刪除元素。另一方面，元組具有固定長度，並且每個元素的型別是預先確定的。一旦定義了元組，我們就不能新增或刪除元素或更改其型別。

用法

當我們需要處理元素集合（其中元素的順序或位置很重要）時，通常會使用陣列。我們可以使用各種陣列方法執行諸如新增、刪除和修改陣列元素之類的操作。另一方面，元組通常用於表示具有不同型別的固定值集，例如表示座標或鍵值對。

型別安全

與元組相比，陣列提供的型別安全性較低。在陣列中，我們可以訪問任何索引處的任何元素，並且只要索引在陣列邊界內，TypeScript 就會允許它。如果我們訪問不存在的元素或假設元素的型別錯誤，這可能會導致潛在的執行時錯誤。元組由於其固定長度和已知型別，提供了更高的型別安全性。TypeScript 可以強制執行元組元素的正確用法，從而減少執行時錯誤的可能性。

為了總結陣列和元組之間的區別，讓我們看一下下表：

差異依據	陣列	元組
結構	動態，可變長度，相同或不同型別的元素	固定長度，不同型別的元素
用法	元素集合，順序很重要	具有不同型別的固定值集
型別安全	型別安全性較低，潛在的執行時錯誤	型別安全性較高，強制型別

結論

總之，陣列和元組都是 TypeScript 中有用的資料結構，但它們具有不同的特性和用法。陣列在長度和元素型別方面提供了靈活性，使其適合儲存需要考慮順序的元素集合。另一方面，元組具有固定長度和預先確定的型別，使其成為表示具有不同型別的固定值集的理想選擇。

根據程式的要求選擇合適的資料結構非常重要。陣列用途廣泛，可以處理各種場景，而元組提供更嚴格的型別安全性並確保正確使用固定值集。通過了解 TypeScript 中陣列和元組之間的區別，您可以在為應用程式選擇正確的資料結構時做出明智的決策。