TypeScript 中的 Tuple

TypeScript 中的 Tuple

在 TypeScript 中，Tuple 是指一个固定长度的数组，其中每个元素的类型都可以自定义。Tuple 可以用来存储一组具有确定顺序的值，比如坐标、颜色值等。

Tuple 的声明

Tuple 声明语法如下所示：

let tupleName: [type1, type2, ..., typeN] = [value1, value2, ..., valueN];

其中 type1 到 typeN 是每个元素的类型，value1 到 valueN 是每个元素的初始值。注意：元素的数量必须与类型一一对应。

下面是一个简单的例子：

let color: [string, number] = ["red", 100]; // 声明一个包含字符串和数字类型的元素的 Tuple 变量

Tuple 的访问

Tuple 的访问方式跟普通数组一样，但是需要使用下标访问。下标从 0 开始，仅支持数字下标。访问元素时，可以通过类型推断获取元素的类型。例如：

let color: [string, number] = ["red", 100];
console.log(color[0]); // 输出 "red"
console.log(color[1]); // 输出 100

Tuple 的元素类型

Tuple 可以存储各种类型的元素，包括基础类型、自定义类型、联合类型等。例如：

let point: [number, number, string] = [10, 20, "hello"]; // Tuple 包含两个数字和一个字符串
let data: [string, number | boolean] = ["hello", true]; // Tuple 包含一个字符串和一个可能是数字或布尔值的类型

Tuple 中的元素也可以声明为可选：

let person: [string, number?] = ["Tom"]; // Tuple 包含一个字符串和一个可选的数字

除此之外，Tuple 还支持元素类型为数组的情况，例如：

let matrix: [number[], string[]] = [[1, 2], ["hello", "world"]];
console.log(matrix[0][1]); // 输出 2
console.log(matrix[1][0]); // 输出 "hello"

需要注意的是，如果访问一个不存在的元素会抛出一个错误。

Tuple 的解构

Tuple 也支持解构操作，可以将 Tuple 中的元素一一解构出来赋值到变量中。例如：

let rectangle: [number, number] = [10, 20];
let [width, height] = rectangle; // 将 Tuple 中的元素分别赋值给 width 和 height 变量
console.log(width); // 输出 10
console.log(height); // 输出 20

还可以使用扩展运算符将 Tuple 中的元素合并到一个新的数组中：

let rectangle: [number, number] = [10, 20];
let [width, height, ...rest] = [...rectangle, "hello", "world"]; // 将 Tuple 中的元素和两个字符串合并到一个新的数组中
console.log(rest); // 输出 ["hello", "world"]

Tuple 的使用场景

Tuple 可以用于 TypeScript 中需要固定长度的数组、需要保持元素类型一致的场景，特别是在一些函数调用和返回值中，可以使用 Tuple 来让调用方更好地理解参数或返回值的结构。

例如，下面是一个使用 Tuple 传递函数参数的例子：

function uploadFile(data: [string, ArrayBuffer]) {
  // 上传文件到服务器
}

let file: [string, ArrayBuffer] = ["file.txt", new ArrayBuffer(1024)];
uploadFile(file); // 调用 uploadFile 函数并传递 Tuple 类型的参数

还可以使用 Tuple 作为函数返回值，如下所示：

function getPerson(): [string, number] {
  let name = "Tom";
  let age = 18;
  return [name, age]; // 返回一个包含 name 和 age 的 Tuple 类型值
}

let person = getPerson(); // 调用 getPerson 函数并获取 Tuple 类型的返回值
console.log(`name: ${person[0]}, age: ${person[1]}`); // 输出 "name: Tom, age: 18"

总结

Tuple 是 TypeScript 中的一种特殊的数组类型，它可以固定长度，同时每个元素的类型也可以自定义。Tuple 可以用于存储各种类型的元素，支持访问、解构等操作，还可以用于函数调用和返回值中。掌握 Tuple 可以提高 TypeScript 中数组类型的使用效率和类型安全性。

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