我们知道数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组。
TypeScript 中的元组（Tuple）是一种特殊类型的数组，它允许在数组中存储不同类型的元素，与普通数组不同，元组中的每个元素都有明确的类型和位置。元组可以在很多场景下用于表示固定长度、且各元素类型已知的数据结构。
创建元组的语法格式如下：
|
1 |
let tuple: [类型1, 类型2, 类型3, ...]; |
声明一个元组并初始化：
|
1 2 |
let mytuple: [number, string]; mytuple = [42,"Runoob"]; |
在上面的例子中，mytuple 是一个元组，它包含一个 number 类型和一个 string 类型的元素。
元组中元素使用索引来访问，第一个元素的索引值为 0，第二个为 1，以此类推第 n 个为 n-1，语法格式如下:
|
1 |
tuple_name[index] |
以下实例定义了元组，包含了数字和字符串两种类型的元素：
|
1 2 3 4 5 6 7 8 9 10 |
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 |
编译以上代码，得到以下 JavaScript 代码：
|
1 2 3 4 5 6 7 8 |
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 |
输出结果为：
|
1 2 3 |
42 Runoob true |
我们可以使用以下两个函数向元组添加新元素或者删除元素：
push 方法可以向元组的末尾添加一个元素，类型必须符合元组定义中的类型约束。如果超出元组的类型约束，TypeScript 会报错。
|
1 2 3 4 |
var tuple = [42, "Hello"]; // 添加符合类型的元素 tuple.push("World"); // 合法，因为元组定义了可选的 string 类型 console.log(tuple); // 输出: [42, "Hello", "World"] |
编译以上代码，得到以下 JavaScript 代码：
|
1 2 3 4 |
var tuple = [42, "Hello"]; // 添加符合类型的元素 tuple.push("World"); // 合法，因为元组定义了可选的 string 类型 console.log(tuple); // 输出: [42, "Hello", "World"] |
输出结果为：
|
1 |
[ 42, 'Hello', 'World' ] |
pop 方法从元组的末尾移除一个元素，并返回该元素。返回的元素类型将根据元组的定义类型推断。
|
1 2 3 4 5 6 7 |
let tuple: [number, string, boolean] = [42, "Hello", true]; // 移除最后一个元素 let lastElement = tuple.pop(); console.log(lastElement); // 输出: true console.log(tuple); // 输出: [42, "Hello"] |
元组是可变的，这意味着我们可以对元组进行更新操作：
|
1 2 3 4 5 6 |
var mytuple = [42, "Runoob", "Taobao", "Google"]; // 创建一个元组 console.log("元组的第一个元素为：" + mytuple[0]) // 更新元组元素 mytuple[0] = 121 console.log("元组中的第一个元素更新为："+ mytuple[0]) |
编译以上代码，得到以下 JavaScript 代码：
|
1 2 3 4 5 |
var mytuple = [42, "Runoob", "Taobao", "Google"]; // 创建一个元组 console.log("元组的第一个元素为：" + mytuple[0]); // 更新元组元素 mytuple[0] = 121; console.log("元组中的第一个元素更新为：" + mytuple[0]); |
输出结果为：
|
1 2 |
元组的第一个元素为：42 元组中的第一个元素更新为：121 |
我们也可以把元组元素赋值给变量，如下所示：
|
1 2 3 4 5 |
let a: [number, string, boolean] = [42, "Hello", true];// 创建一个元组 var [b,c] = a console.log( b ) console.log( c ) |
编译以上代码，得到以下 JavaScript 代码：
|
1 2 3 4 |
var a = [42, "Hello", true]; // 创建一个元组 var b = a[0], c = a[1]; console.log(b); console.log(c); |
输出结果为：
|
1 2 |
42 Hello |
TypeScript 还允许为元组中的每个元素添加标签，这使得元组的含义更加清晰：
|
1 |
let tuple: [id: number, name: string] = [1, "John"]; |
在这个例子中，id 和 name 是元组的标签，可以让代码更加可读。
元组常用于函数返回多个值的场景，或者表示某些固定结构的数据，比如：
|
1 2 3 4 5 6 7 |
function getUserInfo(): [number, string] { return [1, "John Doe"]; } const [userId, userName] = getUserInfo(); console.log(userId); // 输出: 1 console.log(userName); // 输出: John Doe |
TypeScript 可以根据数组的元素自动推断出元组的类型：
|
1 |
let tuple = [42, "Hello"] as const; // 元组类型：[42, "Hello"] |
通过 as const 断言，TypeScript 会将该元组视为一个不可变的常量元组。
元组可以使用数组的 concat 方法进行连接，但需要注意连接后的结果是一个普通的数组，而不是元组。
|
1 2 3 4 5 |
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 方法对元组进行切片操作，返回一个新的数组。
|
1 2 3 4 |
let tuple: [number, string, boolean] = [42, "Hello", true]; let sliced = tuple.slice(1); // 从索引 1 开始切片 console.log(sliced); // 输出: ["Hello", true] |
你可以使用 for…of 循环或者 forEach 方法遍历元组中的元素。
|
1 2 3 4 5 6 7 8 9 |
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 的方法将其转换为普通数组进行进一步处理。
|
1 2 3 4 5 6 7 |
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"] |
使用剩余运算符可以轻松地将多个元组合并成一个新的元组：
|
1 2 3 4 5 6 |
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] |
from:https://www.runoob.com/typescript/ts-tuple.html