TypeScript 元组学习笔记

什么是元组？

元组（Tuple）是 TypeScript 中的一种数据类型，它表示一个已知元素数量和类型的数组，各元素的类型不必相同。

在 JavaScript 中，我们可以通过数组来存储一组数据，但是数组的每个元素都可以是任意类型，而 TypeScript 的元组则要求数组中每个元素的类型都与预先定义好的类型相符。

如何定义元组？

定义元组的语法很简单，只需要在定义数组时给每个元素指定类型即可。例如：

typescriptCopy Code
let tuple1: [string, number];
let tuple2: [boolean, string, number];

上述示例中，tuple1 只包含两个元素，第一个元素为字符串类型，第二个元素为数字类型。而 tuple2 包含三个元素，类型分别为布尔值、字符串和数字。

如何访问元组的元素？

访问元组的元素与访问数组的元素类似，使用索引即可。不过需要注意的是，由于元组中各个元素的类型可能不同，因此不能对元素进行默认的操作。例如：

typescriptCopy Code
let tuple: [string, number];
tuple = ['hello', 10];

console.log(tuple[0].substring(1)); // OK
console.log(tuple[1].substring(1)); // Error, 'number' does not have 'substring'

在上面的代码中，我们尝试对 tuple 中的第二个元素进行 substring 操作，但是由于该元素的类型为数字，因此会出现编译错误。

元组的特殊用法

元组除了作为定义固定元素数量和类型的数组之外，还有一些特殊的用法。

变长元组

在定义元组时，可以使用 ... 来指定一个变长元组（Rest 元组），即该元组中除了已知的类型之外还包含额外的元素。例如：

typescriptCopy Code
let tuple: [string, number, ...boolean[]];
tuple = ['hello', 10, true, false]; // OK
tuple = ['hello', 10, true, false, 'error']; // Error, 'string' is not assignable to type 'boolean'

上面的代码中，我们定义了一个变长元组，它包含一个字符串和一个数字，后面跟着任意数量的布尔值。因此，第一个赋值语句是正确的，而第二个赋值语句由于多了一个字符串导致编译错误。

只读元组

在 TypeScript 3.4 以后的版本中，可以使用 readonly 关键字来定义只读元组。这意味着在元组被初始化之后，它的元素不能再被修改。例如：

typescriptCopy Code
let tuple: readonly [string, number] = ['hello', 10];

tuple[0] = 'world'; // Error, Index signature in type 'readonly [string, number]' only permits reading.

上面的代码中，我们定义了一个只读元组，它包含一个字符串和一个数字。由于该元组是只读的，因此在对其元素进行修改时会出现编译错误。

实例

我们来看一个使用元组的实例，假设我们需要定义一个表示三维坐标的点的类型。我们可以这样定义：

typescriptCopy Code
type Point3D = [number, number, number];

接着，我们可以定义一个函数，计算两个点之间的距离：

typescriptCopy Code
function distance(p1: Point3D, p2: Point3D): number {
  const dx = p1[0] - p2[0];
  const dy = p1[1] - p2[1];
  const dz = p1[2] - p2[2];

  return Math.sqrt(dx ** 2 + dy ** 2 + dz ** 2);
}

console.log(distance([1, 2, 3], [4, 5, 6])); // 5.196152422706632

在上面的代码中，我们使用 Point3D 元组类型来表示一个三维坐标点，并定义了一个 distance 函数，该函数接受两个 Point3D 类型的参数，返回它们之间的距离。最后，我们调用 distance 函数并打印结果。