TypeScript 中的元组 (Tuple) 详解

前言

TypeScript 是 JavaScript 的类型超集，也是 JavaScript 的一种编程语言。TypeScript 给 JavaScript 提供了静态类型系统和面向对象程序设计的概念。

元组 (Tuple) 是 TypeScript 的一种高级数据类型。在实际开发中，我们经常会遇到需要存储一组不同类型的数据的场景。元组就是解决这种问题的一种方案。

元组的基本语法

元组需要使用 [] 符号来表示，其中每个数据类型必须显式声明。可以使用逗号分隔来表示元组中每个元素的类型，代码如下：

let tuple: [string, number];
tuple = ["Hello", 123];

上述代码中，定义了一个元组类型为 [string, number]，并将其赋值为一个具体的元组值 ["Hello", 123]。

元组与数组的区别

数组是一组同类型数据的集合，元组则允许存储不同类型的数据。数组中的每个元素可以使用下标访问，而元组中的每个元素需要使用它们在元组中的位置来访问。

下面是一个示例，展示了数组和元组的区别：

let arr: number[] = [1, 2, 3]; // 数组
let tuple: [string, number] = ["Hello", 123]; // 元组
console.log(arr[0]); // 输出 1
console.log(tuple[1]); // 输出 123

元组的高级用法

越界元素

元组允许定义越界元素，也就是在元组中添加任意类型的数据。在 TypeScript 中，当访问越界元素时，会使用联合类型替代元素类型。

例如，下面的代码中，元组类型定义只有两个元素，但是它被赋值为三个元素的元组：

let tuple: [string, number] = ["Hello", 123, true];
console.log(tuple[2]); // 输出 true
console.log(tuple[3]); // 输出 undefined

解构元组

元组可以像数组一样进行解构操作。下面的代码展示了如何解构元组：

let tuple: [string, number] = ["Hello", 123];
let [str, num] = tuple;
console.log(str); // 输出 "Hello"
console.log(num); // 输出 123

可选元素

元组允许定义可选元素。在类型定义时，可以使用 ? 符号表示某个元素可以不出现在元组中。

例如，下面的代码中，元组类型定义包含了一个可选的布尔类型元素：

let tuple: [string, number, boolean?] = ["Hello", 123, true];
console.log(tuple); // 输出 ["Hello", 123, true]
tuple = ["World", 456];
console.log(tuple); // 输出 ["World", 456]

只读元素

元组允许定义只读元素。在类型定义时，可以使用 readonly 关键字表示某个元素是只读的。

例如，下面的代码中，元组类型定义包含了两个只读元素：

let tuple: readonly [string, number] = ["Hello", 123];
console.log(tuple); // 输出 ["Hello", 123]
tuple[0] = "World"; // 报错：Tuple type '[string, number]' of length '2' has no element at index '0'

总结

元组是 TypeScript 中的一种高级数据类型，允许存储不同类型的数据。它和数组有所区别，具有可选元素、只读元素和越界元素等特性。在实际开发中，使用元组可以更方便地存储和处理不同类型的数据。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664bff0ad3423812e4ad4c1f