title: 元组类型

元组类型

原文地址

在本教程中，你将学习 TypeScript 中的元组类型，以及它的使用方法。

TypeScript 中的元组类型介绍

元组的工作机制和 数组类型 类似，但有一些额外的条件限制：

  • 元组中元素的数量是固定的；
  • 元素中元素的类型是已知的，并且它们不需要都相同。

例如，可以用元组来表示一个由 string 和 number 类型组成的值：

  1. let skill: [string, number];
  2. skill = ['Programming', 5];

元组中的值的顺序非常重要，如果把 skill 元组中值的顺序调整成 [5, "Programming"]，将会得到一个错误提示：

  1. let skill: [string, number];
  2. skill = [5, 'Programming'];

错误提示：

  1. error TS2322: Type 'string' is not assignable to type 'number'.

综上所述，对于有特定顺序且相互关联的数据，使用元组来存储它们是一个很好的实践方法。例如，可以使用一个元组来定义一个 RGB 颜色值，它总是以三个数字的形式出现：

  1. (r,g,b)

如下所示：

  1. let color: [number, number, number] = [255, 0, 0];

color[0], color[1] 和 color[2] 分别映射到 Red, Green 和 Blue 颜色值上。

可选元组元素

从 TypeScript 3.0 开始，元组可以通过使用问号 (?) 后缀来指定可选元素。例如，可以使用可选的 alpha 通道值来定义一个 RGBA 元组：

  1. let bgColor, headerColor: [number, number, number, number?];
  2. bgColor = [0, 255, 255, 0.5];
  3. headerColor = [0, 255, 255];

注意：RGBA 使用 red, green, blue 和 alpha 模型定义颜色，alpha 指定颜色的透明度。

小结

  • 元组是一个具有固定数量和已知元素类型的数组。