TypeScript的元组类型

上一篇文章中介绍到数组这个类型，那么这篇文章介绍一个特殊数组，这个特殊数组就是元组。

TypeScript 的 Tuple（元组）类型是什么？它与普通数组有何不同？

TypeScript 的元组（Tuple）类型是一种特殊的数组类型，具有以下特点：

• 元素数量是固定的，即一旦定义，字面上不能增删元素。
• 每个元素的类型是已知的，并且可以不同。

与普通数组（array）相比，普通数组的元素类型通常相同且数量不固定，而元组则要求每个位置的类型和数量都明确规定：

let skills: [string, number];

skills = ['Agentic AI', 5];

// 报错 Type '[string, number, number]' is not assignable to type '[string, number]'.  Source has 3 element(s) but target allows only 2.ts(2322)
skills = ['Agentic AI', 5, 9];

数组 skills 的第一个元素是 string 类型，第二个元素是 number，且数组元素个数是2。

---

元组中元素的顺序为什么如此重要吗？

顺序非常重要。元组类型规定了每个位置的类型，如果顺序颠倒会导致类型错误：

let skill: [string, number];

// 错误，编译器会报错Type 'string' is not assignable to type 'number'.
skill = [5, 'Agentic AI'];

此时 TypeScript 编译器会报错，因为第一个元素应为 string，第二个为 number，而上面代码中，第一个元素赋值 number 类型的值，第二个元素赋值 string 类型的值。

---

元组适合用来表达哪些类型的数据？元组类型还有哪些新特性？

元组适合用来表达那些“顺序和类型都很重要”的数据：

• 表达结构化但类型不同的数据（如数据库中的一行记录）
• 键值对、坐标点等
• RGB 颜色值：[number, number, number]

// color[0] 表示红色，color[1] 表示绿色，color[2] 表示蓝色⁠
let color: [number, number, number] = [255, 0, 0];

TypeScript 3.0 之后，元组类型支持「可选元素」，即可以用问号（?）标记某些元素为可选的：

let bgColor, headerColor: [number, number, number, number?];

// 数组最后一个元素赋值
bgColor = [0, 255, 255, 0.5];

// 数组最后一个元素没有赋值
headerColor = [0, 255, 255];

这对于像 RGBA 颜色（红、绿、蓝、透明度）这样的场景非常有用。

---

• 如果你觉得我的工作对你有帮助，可以通过分享这篇文字或者关注同名公众号来支持我，你的支持是我持续创作的最大动力：
  

• 转载以及引用请注明原文链接。

• 本博客所有文章除特别声明外，均采用CC 署名-非商业使用-相同方式共享 许可协议。