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); // 输出:5
numbers.pop(); // 删除最后一个元素
console.log(numbers); // 输出:[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 中数组和元组之间的区别，您可以在为应用程序选择合适的数据结构时做出明智的决定。

相关文章

• 解释 TypeScript 中的 noImplicitAny
• 解释 TypeScript 中的剩余参数和实参
• TypeScript 支持所有面向对象原则吗?
• TypeScript 中的 Any 和 Object