TypeScript中的数组和元组
2023-03-14 22:54:54 时间
数组(Array)
TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。
第一种,可以在元素类型后面接上[]
,表示由此类型元素组成的一个数组:
let arrOfNumbers: number[] = [1,2,3]
复制代码
这个时候如果我们的数组中有其他类型的值会报错比如:
let arrOfNumbers: number[] = [1,2,3,'name']
复制代码
报错信息:
如果我们要使用数组中的Push
方法,如果我们增加的是数字类型那么会正常运行,如果我们增加别的类型的值那么页会报错。
正确示例:
let arrOfNumbers: number[] = [1,2,3]
arrOfNumbers.push(3)
复制代码
错误示例:
let arrOfNumbers: number[] = [1,2,3]
arrOfNumbers.push('123')
复制代码
报错信息:
第二种方式是使用数组泛型,Array<元素类型>
:
let list: Array<number> = [1, 2, 3];
复制代码
类数组(Array like Object)
- 可以利用属性名模拟数组的特性
- 可以动态的增长
length
属性 - 如果强行让类数组调用push方法,则会根据length属性值得位置进行属性的扩充。
function test(){
console.log(arguments)
arguments.length
arguments[0]
}
复制代码
在TypeScript中类型:
如果我们调用没有的方法比如forEach
会报错
function test(){
console.log(arguments)
arguments.length
arguments[0]
arguments.forEach();
}
复制代码
报错信息:
如果我们将数组增加到类数组中也会报错
function test(){
console.log(arguments)
arguments.length
arguments[0]
let arr: any[] = arguments
}
复制代码
报错信息:
其实在TypeScript已经定义好了很多类型比如:
- HTMLAllCollection
- IArguments
- NodeList
等等
元组(Tuple)
元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。 比如,你可以定义一对值分别为string
和number
类型的元组。
let user: [string,Number] = ['xiaochen',20]
复制代码
在这里如果我们的类型或者数量不能一一对应那么也会报错:
let user: [string,Number] = [20,'xiaochen']
复制代码
报错信息:
let user: [string,Number] = ['xiaochen',20,true]
复制代码
报错信息:
如果我们想增加一些属性值可以使用数组中的一些方法比如push
:
let user: [string,Number] = ['xiaochen',20]
user.push('123')
复制代码
注意:在这个例子中我们只能添加字符串或者数字类型,如果添加别的类型会报错
let user: [string,Number] = ['xiaochen',20]
user.push(true)
复制代码
报错信息:
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的