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 中数组和元组之间的区别，您可以在为应用程序选择正确的数据结构时做出明智的决策。