TypeScript 元组

我们知道数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组。

在 TypeScript 里，元组（Tuple）可以理解为一种“更有边界感”的数组。它和普通数组最大的区别就在于：元组允许把不同类型的值放在同一个数组里，而且每个元素不仅类型是确定的，连所在位置也是固定的。正因为这样，元组特别适合用来描述那些长度固定、元素类型事先就已经明确的数据结构。

创建元组的语法格式如下：

let tuple: [类型1, 类型2, 类型3, ...];

实例

声明一个元组并初始化：

let mytuple: [number, string];
mytuple = [42,"Runoob"];

在上面的例子中，mytuple 是一个元组，它包含一个 number 类型和一个 string 类型的元素。

访问元组

元组中元素使用索引来访问，第一个元素的索引值为 0，第二个为 1，以此类推第 n 个为 n-1，语法格式如下:

tuple_name[index]

实例

以下实例定义了元组，包含了数字和字符串两种类型的元素：

TypeScript

let mytuple: [number, string, boolean] = [42, "Runoob", true];
// 访问元组中的元素
let num = mytuple[0]; // 访问第一个元素，值为 42，类型为 number
let str = mytuple[1]; // 访问第二个元素，值为 "Runoob"，类型为 string
let bool = mytuple[2]; // 访问第三个元素，值为 true，类型为 boolean
console.log(num);  // 输出: 42
console.log(str);  // 输出: Runoob
console.log(bool); // 输出: true

编译以上代码，得到以下 Ja vaScript 代码：

Ja vaScript

var mytuple = [42, "Runoob", true];
// 访问元组中的元素
var num = mytuple[0]; // 访问第一个元素，值为 42，类型为 number
var str = mytuple[1]; // 访问第二个元素，值为 "Runoob"，类型为 string
var bool = mytuple[2]; // 访问第三个元素，值为 true，类型为 boolean
console.log(num); // 输出: 42
console.log(str); // 输出: Runoob
console.log(bool); // 输出: true

输出结果为：

42
Runoob
true

元组运算

我们可以使用以下两个函数向元组添加新元素或者删除元素：

• push() 向元组添加元素，添加在最后面。

• pop() 从元组中移除元素（最后一个），并返回移除的元素。

push 方法可以把新元素追加到元组末尾，不过前提很明确：新增值的类型，必须落在元组既定的类型约束范围内。只要超出了这个范围，TypeScript 就会直接报错。

TypeScript

var tuple = [42, "Hello"];
// 添加符合类型的元素
tuple.push("World"); // 合法，因为元组定义了可选的 string 类型
console.log(tuple); // 输出: [42, "Hello", "World"]

编译以上代码，得到以下 Ja vaScript 代码：

Ja vaScript

var tuple = [42, "Hello"];
// 添加符合类型的元素
tuple.push("World"); // 合法，因为元组定义了可选的 string 类型
console.log(tuple); // 输出: [42, "Hello", "World"]

输出结果为：

[ 42, 'Hello', 'World' ]

pop 方法从元组的末尾移除一个元素，并返回该元素。返回的元素类型将根据元组的定义类型推断。

实例

let tuple: [number, string, boolean] = [42, "Hello", true];
// 移除最后一个元素
let lastElement = tuple.pop();
console.log(lastElement); // 输出: true
console.log(tuple);       // 输出: [42, "Hello"]

更新元组

元组是可变的，这意味着我们可以对元组进行更新操作：

TypeScript

var mytuple = [42, "Runoob", "Taobao", "Google"]; // 创建一个元组
console.log("元组的第一个元素为：" + mytuple[0]) 
// 更新元组元素
mytuple[0] = 121     
console.log("元组中的第一个元素更新为："+ mytuple[0])

编译以上代码，得到以下 Ja vaScript 代码：

Ja vaScript

var mytuple = [42, "Runoob", "Taobao", "Google"]; // 创建一个元组
console.log("元组的第一个元素为：" + mytuple[0]);
// 更新元组元素
mytuple[0] = 121;
console.log("元组中的第一个元素更新为：" + mytuple[0]);

输出结果为：

元组的第一个元素为：42
元组中的第一个元素更新为：121

解构元组

我们也可以把元组元素赋值给变量，如下所示：

TypeScript

let a: [number, string, boolean] = [42, "Hello", true];// 创建一个元组
var [b,c] = a 
console.log( b )    
console.log( c )

编译以上代码，得到以下 Ja vaScript 代码：

Ja vaScript

var a = [42, "Hello", true]; // 创建一个元组
var b = a[0], c = a[1];
console.log(b);
console.log(c);

输出结果为：

42
Hello

使用标签元组

TypeScript 还允许为元组中的每个元素添加标签，这使得元组的含义更加清晰：

let tuple: [id: number, name: string] = [1, "John"];

在这个例子中，id 和 name 是元组的标签，可以让代码更加可读。

元组的实际应用

元组常用于函数返回多个值的场景，或者表示某些固定结构的数据，比如：

实例

function getUserInfo(): [number, string] {
    return [1, "John Doe"];
}
const [userId, userName] = getUserInfo();
console.log(userId);   // 输出: 1
console.log(userName); // 输出: John Doe

元组的类型推断

TypeScript 可以根据数组的元素自动推断出元组的类型：

let tuple = [42, "Hello"] as const; // 元组类型：[42, "Hello"]

通过 as const 断言，TypeScript 会将该元组视为一个不可变的常量元组。

连接元组

元组可以使用数组的 concat 方法进行连接，但需要注意连接后的结果是一个普通的数组，而不是元组。

实例

let tuple1: [number, string] = [42, "Hello"];
let tuple2: [boolean, number] = [true, 100];
let result = tuple1.concat(tuple2); // 结果是一个数组: [42, "Hello", true, 100]
console.log(result); // 输出: [42, "Hello", true, 100]

切片元组

你可以使用数组的 slice 方法对元组进行切片操作，返回一个新的数组。

实例

let tuple: [number, string, boolean] = [42, "Hello", true];
let sliced = tuple.slice(1); // 从索引 1 开始切片
console.log(sliced); // 输出: ["Hello", true]

遍历元组

你可以使用 for...of 循环或者 forEach 方法遍历元组中的元素。

实例

let tuple: [number, string, boolean] = [42, "Hello", true];
// 使用 for...of 循环
for (let item of tuple) {
    console.log(item);
}
// 使用 forEach 方法
tuple.forEach(item => console.log(item));

转换为普通数组

虽然元组是一个固定长度、固定类型的数组，但可以通过 Array.prototype 的方法将其转换为普通数组进行进一步处理。

实例

let tuple: [number, string, boolean] = [42, "Hello", true];
// 转换为数组并使用数组方法
let array = Array.from(tuple);
array.push("New Element");
console.log(array); // 输出: [42, "Hello", true, "New Element"]

扩展元组

使用剩余运算符可以轻松地将多个元组合并成一个新的元组：

实例

let tuple1: [number, string] = [42, "Hello"];
let tuple2: [boolean] = [true];
let extendedTuple: [number, string, ...typeof tuple2] = [42, "Hello", ...tuple2];
console.log(extendedTuple); // 输出: [42, "Hello", true]