前言
- 数组合并了相同类型的对象,而元组合并了不同类型的对象
- 元组从外形上看与数组相似,但是元组中的元素可以是不同类型的,而数组中的元素必须是相同的类型
- 元组表示一个已知元素数量和类型的数组,各元素的类型不必想通过
- TypeScript 3.0 开始支持函数 Rest 参数和 Spread 表达式使用元组类型。当函数的 Rest 形参具有元组类型时,元组类型被展开为一系列独立的形参
- 元组类型支持可选元素类型,可以在元素类型上后缀一个 ? 来指定元素是可选的。在 --strictNullChecks 模式下,? 会自动在元素类型中包含 undefined,类似于(函数的)可选参数
示例
这是一个简单的例子
js
let tuple: [number, string, boolean];
tuple = [42, "hello", true];
写错类型值会报错
不能写和定义类型不相同类型的值
js
let info:[string, number, boolean] = ['along', 18, true];
---------------------------------------
info[1] //18
info[1] = 19;//19
info[1] = '2';//Type '"2"' is not assignable to type 'number'.
结论:当获取一个元素时,就会获取对应的类型,可以进行对应的操作
越界的元素
可以对元组使用push方法, 当添加越界的元素时,它的类型会被限制为元组中每个类型的联合类型。
js
let info: [string, number];
info = ['along', 18];
-------------------------------
info = ['along', 18, 2]; //Type '[string, number, number]' is not assignable to type '[string, number]'.
info.push('2'); // ['along', 18, '2']
info.push(true); // 编辑器提示:类型“true”的参数不能赋给类型“string | number”的参数。
可选的元素
元组类型支持可选元素类型,可以在元素类型上后缀一个 ? 来指定元素是可选的。需要注意,可选元素一定要放在必选元素的后面。
例如,以下定义了一个元组类型 [number, string?, boolean?],其中 string 和 boolean 是可选的。在 --strictNullChecks 模式下,? 会自动在元素类型中包含 undefined,类似于(函数的)可选参数。可选元素的值可以为 undefined 或对应的类型的值。使用可选元素时,可以通过判断可选元素是否为 undefined 来确定元组的长度和元素类型。以下是一个使用可选元素的例子
js
let t: [number, string?, boolean?];
t = [42, "hello", true];
t = [42, "hello"];
t = [42];
Rest元素
元组类型中的 Rest 元素是指元组类型的最后一个元素可以是形式为 ...X 的 Rest 元素,X 是一个数组类型。Rest 元素指定了元组类型是无限扩展的,可能有零个或更多个具有数组元素类型的额外元素。使用 Rest 元素时,可以通过 slice() 方法或 for...of 循环等方式获取元组中的所有元素。以下是一个使用 Rest 元素的例子:
js
function tuple<T extends any[]>(...args: T): T {
return args;
}
const numbers: number[] = [1, 2, 3, 4, 5];
const t1 = tuple("foo", 1, true); // [string, number, boolean]
const t2 = tuple("bar", ...numbers); // [string, ...number[]]
console.log(t1); // ["foo", 1, true]
console.log(t2); // ["bar", 1, 2, 3, 4, 5]
以上代码定义了一个名为 tuple 的函数,该函数的 Rest 形参具有元组类型,返回值类型也是元组类型。在函数调用时,使用 ...numbers 语法将 numbers 数组中的所有元素作为 Rest 元素传递给函数。函数返回的元组类型的最后一个元素是类型为 number[] 的 Rest 元素,表示元组类型是无限扩展的,可能有零个或更多个具有数组元素类型的额外元素。