Skip to content
On this page

TypeScript Tuple

摘要:在本教程中,你将了解 TypeScript 的 Tuple 类型和它的用途。

TypeScript 元组类型介绍

元组的工作方式与数组类似,但有一些额外的考虑:

  • 元组中元素的数量是固定的。
  • 元素的类型是已知的,而且不需要是相同的。

例如,你可以使用元组来将值表示为 stringnumber 的对:

ts
let skill: [string, number];
skill = ['Programming', 5];

元组中的值的顺序是很重要的。如果你把 skill 元组的值的顺序改为 [5, "Programming"],你会得到一个错误:

ts
let skill: [string, number];
skill = [5, 'Programming'];

Error:

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

因此,使用元组来表示按特定顺序相关联的数据是一个好习惯。

例如,可以使用元组来定义一个 RGB 颜色,它总是以三个数字的模式出现:

(r,g,b)

例如:

ts
let color: [number, number, number] = [255, 0, 0];

color[0]color[1]color[2] 将被逻辑地映射为 RedGreenBlue 的颜色值。

可选的元组元素

从 TypeScript 3.0 开始,元组可以使用问号(?)后缀指定可选的元素。

例如,你可以定义一个带有可选的 alpha 通道值的 RGBA 元组。

ts
let bgColor, headerColor: [number, number, number, number?];
bgColor = [0, 255, 255, 0.5];
headerColor = [0, 255, 255];

WARNING

请注意,RGBA 使用红、绿、蓝和 alpha model 来定义颜色。alpha 指定了颜色的不透明度。

总结

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