TypeScript：数组与元组的区别

基本认知

什么是元组？

从 TypeScript 中来看，元组是一个长度固定的、子元素类型不需相同的数组。

可以简单粗暴的理解为，元组是一种特殊的数组。

数组与元组

在 TypeScript 中，定义数组时，无需指定数组的长度，但是，每个数组只能指定一种子元素类型，然后所有的子元素都必须是指定的类型：

// 数组的每一个子元素类型都相同
const arrNumber: number[] = [1,2,3,4,5]
const arrString: Array<string> = ['a', 'b', 'c']

// 可以随意更改数组的长度
arrNumber[5] = 6
console.log('arrNumber:', arrNumber)
// arrNumber: (6) [1, 2, 3, 4, 5, 6]

但是在定义元组时，可以规定每一个子元素的类型，子元素的类型不必相同，但同时，也是指定了元组的长度：

// 定义元组时，需要指定每一个元素的类型，tuple[0] 是 number，tuple[1] 是 string
// 同时，也指定长度为 2
const tuple: [number, boolean] = [12, true]

// 此处越界，会报错，但是不会影响执行
tuple[2] = 12

console.log('tuple:', tuple)
// tuple: (3) [12, true, 12]

在定义元组时，已经明确规定了长度为 2，所以当给 tuple[2] 赋值时，会出现以下错误：

大意就是元组的长度是 2，所以在索引为 2 的地方不存在任何元素。也就是说，每一次越界访问，都是不被允许的，但实际上却可以访问。

元组的本质仍是数组，所有的数组方法都可以使用。

元组别名

元组另一个区别于数组的地方，就是元组的每一个元素，都可以设定别名。

类似于对象，每一个属性都有自己的名称，但不同的是 元组 的元素别名，实际上并没有任何实际作用，也不可能通过别名访问:

// tuple[0] 的别名是 age，tuple[1]的别名是 hasPartner
const tuple: [age: number, hasPartner: boolean] = [18, false]

// 无法通过别名访问到具体的值
console.log('tuple.age:', tuple['age'])
// tuple.age: undefined

唯一的用处，就是在编辑器中会弹出提示，提示这个元素代表着什么意思，如下: 

自从元组有了别名之后，我个人觉得有点类似于关系数据库的元组。

关系数据库的元组：元组（tuple）是关系数据库中的基本概念，关系是一张表，表中的每行（即数据库中的每条记录）就是一个元组。

也就是说，在数据库中，每一条数据都是元组，元组是数据的集合，元组中的每一个数据对应表中的某个属性，也就是具有某种含义。

TypeScript 中的元组也是数据的集合，加上别名之后，每个数据，也都被赋予其他的含义：

// tuple[0] 代表年龄
// tuple[1] 代表是否已婚
const tuple: [age: number, hasPartner: boolean] = [18, false]

虽然别名不参与实际的程序运行，但是能让开发者明白，当前数据所拥有的含义。