TS学习笔记之数组、元组

该系列文章是本人阅读阮一峰老师的《TypeScript教程》学习笔记,欢迎各位大佬指出不正确的地方,感谢!

对比

数组

数组的两种写法

  1. 在数组成员的类型后面,加上一对方括号;

2. 使用TS内置的Array接口。

数组类型声明之后,成员数量是不限制的,也可以是空数组。所以TS不会对数组边界进行检查,越界访问数组并不会报错。

TS允许使用方括号读取数组成员的类型。

数组类型的推断

如果数组变量没有声明类型,TS就会推断数组成员的类型。

如果变量的初始值是空数组,TS会推断数组类型是any\[\],后面为这个数组赋值时,TS会自动更新类型推断。

如果初始值不是空数组,类型推断就不会更新。

只读数组,const断言

TS允许声明只读数组,方法是在数组类型前面加上readonly关键字。

只读数组和普通数组在TS中是不一样的类型,后者是前者的子类型。因为只读数组没有pop()、push()之类会改变原数组的方法,所以普通数组的方法数量要多于只读数组。

readonly关键字不能与数组的泛型写法一起使用。

TS提供了ReadonlyArray和Readonly专门的泛型,用来生成只读数组的类型。

只读数组还有一种声明方法,就是用"const断言"。

多维数组

TS使用T\[\]\[\]的形式,表示二维数组,T是最底层数组成员的类型。

元组

元组是TS特有的数据类型,它表示成员类型可以自由设置的数组,即数组的各个成员的类型可以不同。

元组必须声明每个成员的类型。

区别数组和元组的方法:成员类型写在方括号里面的就是元组,写在外面的就是数组。

使用元组时,必须明确给出类型声明,不能省略,否则TS会把一个值自动推断为数组。

元组成员的类型可以添加问号后缀(?),表示该成员是可选的。但问号只能用于元组的尾部成员,也就是说,所有可选成员必须在必须按成员之后。

由于需要声明每个成员的类型,所以大多数情况下,元组的成员数量是有限的,从类型声明就可以明确知道,元组包含多少个成员,越界的成员会报错。

使用扩展运算符(...),可以表示不限制成员数量的元组。

扩展运算符用在元组的任意位置都可以,但后面只能是数组或元组。

元组可以通过方括号,读取成员类型。

元组的成员都是数值索引,即索引类型是number。

只读元组

元组可以是只读的,不允许修改。

跟数组一样,只读元组是元组的父类型。所以,元组可以替代只读元组,而只读元组不能替代元组。

只读元组跟只读数组一样,因为不能替代元组,所以会有让人困惑的报错。

成员数量的推断

如果没有可选成员和扩展运算符,TS会推断出元组的成员数量(即元组长度)。

如果使用了扩展运算符,TS就无法推断出成员数量。

一旦扩展运算符使得元组的成员数量无法推断,TS内部就会把该元组当成数组处理。

扩展运算符与成员数量

扩展运算符将数组转成一个逗号分隔的序列,TS会认为这个序列的成员数量是不确定的,因为数组的成员数量是不确定的。

如果函数调用时,使用扩展运算符传入函数参数,可能发生参数数量与数组长度不匹配的报错。

可以接受任意数量的参数的函数,使用扩展运算符就不会报错。

解决这个问题的方法,就是把成员数量不确定的数组,写成成员数量确定的元组,再使用扩展运算符。

另一种写法是使用as const断言。

相关推荐
paopaokaka_luck20 分钟前
基于springboot+vue的益暖微光公益服务平台(DeepSeek公益助手、善款信息追溯、志愿服务积分闭环、ECharts运营分析、活动状态自动流转)
java·前端·javascript·spring boot·mysql·架构·echarts
栀椩30 分钟前
Electron 内嵌页面跨域问题(CORS/PNA)解决全记录
前端·javascript·electron
SEO_juper39 分钟前
Chrome 扩展一键查看当前页面 SEO 信息:不用切页面,点一下全出来
前端·javascript·chrome
Highcharts.js41 分钟前
CSUN 2026|Highcharts无障碍数据与AI分享
javascript·人工智能·数据分析·highcharts·图表开发
Nymph_Zhu1 小时前
vue3+element-plus 文件上传
前端·typescript·vue3·element-plus
系统集成-鹰翔1 小时前
ERP推单数据库怎么备份:SQLite WAL模式下只复制db文件为什么可能漏任务
javascript·数据库·经验分享·后端
QianhangQianping1 小时前
撤销重做不是「存快照」:一个可视化编辑器的Operation 设计
java·前端·数据库·typescript·编辑器·前端架构·撤销重做
小大宇2 小时前
Vue知识点-ElementPlus-05 输入框
前端·javascript·vue.js
外贸GEO优化2 小时前
外贸独立站的可抓取性:JS 渲染、懒加载与无限滚动到底影响什么
开发语言·javascript·ecmascript
web打印社区2 小时前
Lodop在Edge和双核浏览器-先分清内核
前端·javascript·edge·pdf·ecmascript·html5