元组类型是另一种 Array 类型，它确切地知道它包含多少个元素，以及它在特定位置包含哪些类型。
简单使用
1
2
| type Tuple = [ string, number ]
const person_01: Tuple = [ '张三', 24 ]
|
这里的 person 是 string 和 number 的元组类型。元组类型可以把多个元素作为一个单元传递。
你也可以这样写
1
| const person_02: [ string, number ] = [ '李四', 30 ]
|
赋值和访问
1
2
3
4
5
6
| let person_03: [ string, number ] = [ '王五', 18 ]
person_03[0] = '老六'
person_03[1] = 25
console.log(person_03[0]) // 老六
console.log(person_03[1]) // 25
console.log(person_03) // [ '老六', 25 ]
|
在函数中的使用
1
2
3
4
5
6
7
8
| let PersonFn = (person: [ string, number ]) => {
console.log(person[0]) // 小七
console.log(person[1]) // 20
// console.log(person[2])
console.log(person) // [ '小七', 20 ]
}
PersonFn([ '小七', 20 ])
|
如果我们试图索引超过元素的数量，我们会得到一个错误，比如
1
2
| // 长度为 "2" 的元组类型 "[string, number]" 在索引 "2" 处没有元素。
console.log(person[2])
|
解构元组
使用 JavaScript 的数组解构来 解构元组
1
2
3
4
5
| let TupleFn = (person: [ string, number ]) => {
const [name, age] = person
console.log(`我是${name}，今年${age}岁`) // 我是老王，今年28岁
}
TupleFn([ '老王', 28 ])
|
可选属性
1
2
3
4
5
6
| type Man = [string, number, string?]
function ManFn(person: Man) {
console.log(person.length)
}
ManFn(['老王', 40]) // 2
ManFn(['老王', 40, '男']) // 3
|
总结
元组类型在大量基于约定的 API 中很有用，其中每个元素的含义都是 “明确的”。这使我们在解构变量时可以灵活地命名变量。
1
2
3
| let person: [string, number, string] = ['老王', 40, '男']
const [name, age, sex] = person
console.log(`我是${name}，今年${age}岁，${sex}`) // 我是老王，今年40岁，男
|