TypeScript 元组解释

发布时间：2023-03-30 08:50:26 所属栏目：教程来源：

导读：本节介绍元组这一数据类型的定义及其使用，通过元组可以存储不同类型的元素，而非像数组那样只能存储相同元素类型（any[] 除外）。

相同类型元素组成成为数组，不同类型元素组成了元组（Tuple）。

声明一个由

本节介绍元组这一数据类型的定义及其使用，通过元组可以存储不同类型的元素，而非像数组那样只能存储相同元素类型（any[] 除外）。

相同类型元素组成成为数组，不同类型元素组成了元组（Tuple）。

声明一个由 string 和 number 构成的元组：

const list: [string, number] = ['Sherlock', ] // ok
const list1: [string, number] = [, 'Sherlock'] // error
代码解释：元组中规定的元素类型顺序必须是完全对照的，而且不能多、不能少，list1 中定义的第一个元素为 string类型，不能赋值为 number类型的数据。

当赋值或访问一个已知索引的元素时，会得到正确的类型：

const list: [string, number] = ['Sherlock', ]
list[].substr() // ok
list[].substr() // Property 'substr' does not exist on type 'number'.
代码解释：

第 3 行，list[0] 是一个字符串类型，拥有 substr() 方法。

第 4 行，list[1] 是一个数字类型，没有 substr() 方法，所以报错。

要注意元组的越界问题，虽然可以越界添加元素（不建议），但是不可越界访问：

const list: [string, number] = ['Sherlock', ]
list.push('hello world')
console.log(list) // ok [ 'Sherlock', 1887, 'hello world' ]
console.log(list[]) // Tuple type '[string, number]' of length '2' has no element at index '2'
代码解释：

第 2 行，向一个声明了只有两个元素的元组继续添加元素，这种操作虽然可行，但是严重不建议！

第 5 行，该元组只有两个元素，不可越界访问第三个元素。

元组类型允许在元素类型后缀一个 ? 来说明元素是可选的：

const list: [number, string?, boolean?]
list = [, 'Sherlock', true]
list = [, 'Sherlock']
list = []
代码解释：可选元素必须在必选元素的后面，也就是如果一个元素后缀了 ?号，其后的所有元素都要后缀 ?号。

元组可以作为参数传递给函数，函数的 Rest 形参可以定义为元组类型：

declare function rest(...args: [number, string, boolean]): void
等价于：

declare function rest(arg1: number, arg2: string, arg3: boolean): void
TIPS：在声明文件（.d.ts）中，关键字 declare 表示声明作用。声明文件用于编写第三方类库，通过配置 tsconfig.json 文件中的 declaration 为 true，在编译时可自行生成。

还可以这样：

const list: [number, ...string[]] = [, 'a', 'b', 'c']
const list1: [string, ...number[]] = ['a', , , ]
代码解释： Rest 元素指定了元组类型是无限扩展的，可能有零个或多个具有数组元素类型的额外元素。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!