6.【TypeScript 教程】TypeScript 元组(Tuple)

简介: 6.【TypeScript 教程】TypeScript 元组(Tuple)

TypeScript 元组(Tuple)

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

1. 解释

相同类型元素组成成为数组,不同类型元素组成了元组(Tuple)。

2. 定义元组类型

声明一个由 stringnumber 构成的元组:

const list: [string, number] = ['Sherlock', 1887]   // ok
 
const list1: [string, number] = [1887, 'Sherlock']  // error

代码解释: 元组中规定的元素类型顺序必须是完全对照的,而且不能多、不能少,list1 中定义的第一个元素为 string类型,不能赋值为 number类型的数据。

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

const list: [string, number] = ['Sherlock', 1887]
 
list[0].substr(1)  // ok
list[1].substr(1)  // Property 'substr' does not exist on type 'number'.

代码解释:

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

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

要注意元组的越界问题,虽然可以越界添加元素(不建议),但是不可越界访问:

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

代码解释:

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

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

3. 可选元素类型

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

const list: [number, string?, boolean?]
list = [10, 'Sherlock', true]
list = [10, 'Sherlock']
list = [10]

代码解释: 可选元素必须在必选元素的后面,也就是如果一个元素后缀了 ?号,其后的所有元素都要后缀 ?号。

4. 元组类型的 Rest 使用

元组可以作为参数传递给函数,函数的 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[]] = [10, 'a', 'b', 'c']
 
const list1: [string, ...number[]] = ['a', 1, 2, 3]

代码解释: Rest 元素指定了元组类型是无限扩展的,可能有零个或多个具有数组元素类型的额外元素。

5. 小结

本小节介绍了元组类型的声明方式和一些技巧,在实际开发中可以灵活应用。

目录
相关文章
|
3月前
|
存储 Java 索引
(Python基础)新时代语言!一起学习Python吧!(二):字符编码由来;Python字符串、字符串格式化;list集合和tuple元组区别
字符编码 我们要清楚,计算机最开始的表达都是由二进制而来 我们要想通过二进制来表示我们熟知的字符看看以下的变化 例如: 1 的二进制编码为 0000 0001 我们通过A这个字符,让其在计算机内部存储(现如今,A 字符在地址通常表示为65) 现在拿A举例: 在计算机内部 A字符,它本身表示为 65这个数,在计算机底层会转为二进制码 也意味着A字符在底层表示为 1000001 通过这样的字符表示进行转换,逐步发展为拥有127个字符的编码存储到计算机中,这个编码表也被称为ASCII编码。 但随时代变迁,ASCII编码逐渐暴露短板,全球有上百种语言,光是ASCII编码并不能够满足需求
204 4
|
存储 JavaScript
typeScript进阶(11)_元组类型
本文介绍了TypeScript中的元组(Tuple)类型,它是一种特殊的数组类型,可以存储不同类型的元素。文章通过示例展示了如何声明元组类型以及如何给元组赋值。元组类型在定义时需要指定数组中每一项的类型,且在赋值时必须满足这些类型约束。此外,还探讨了如何给元组类型添加额外的元素,这些元素必须符合元组类型中定义的类型联合。
189 0
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
JavaScript 前端开发 安全
TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第9天】TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
存储 缓存 索引
python 的 tuple(元组) 是不是冗余设计?
python 的 tuple(元组) 是不是冗余设计?
279 4
|
资源调度 JavaScript 前端开发
TypeScript实战教程(一):表单上传与后端处理
本文是TypeScript实战教程的第一部分,介绍了使用TypeScript进行表单上传和后端处理的完整流程,包括环境配置、前端表单创建、使用TypeScript和Express框架搭建服务端、处理表单数据,并提供了详细的代码示例和运行测试方法。
TypeScript实战教程(一):表单上传与后端处理
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
221 0
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
475 0