攀爬TS之路(三) 数组类型、元组类型

简介: 攀爬TS之路(三) 数组类型、元组类型

数组类型

数组类型有多种定义方式。

普通法

这个方法基本上和其他静态语言的使用差不多

数组使用联合类型(这个看的教程没有这种用法,有问题可以评论交流)

数组泛型

使用数组泛型(Array<type>)来定义数组。

let nums: Array<number | string> = [1, 2, 3]

nums.push(2)
nums.push('3')

console.log(nums)       //  [1, 2, 3, 2, '3']

nums.push(true)     // 这里报错,因为定义的数组类型里不包括`boolean`类型

接口

数组就是一个特殊的对象,它的键是数字,且是从0开始。所以我们也可以使用接口来表示数组。

interface IArray {
    [index: number]: number | string
}

const arr: IArray = [1, 2, 'hello']

console.log(arr)

使用接口表示数组有很大问题:不能调用数组的方法

没想到好的解决方案,有想法的可以评论一下(虽然不建议用这个)

元组类型

元组在赋值时,需要提供元组类型中指定的项。

const tuple: [number, string, number | string] = [1, '2', 'hello']  // 正常

// const tuple: [number, string, number | string] = [1, '2']   // 报错:不能将类型“[number, string]”分配给类型“[number, string, string | number]”。源具有 2 个元素,但目标需要 3 个。

// const tuple: [number, string, number | string] = [1, '2', 'hello', 4]   // 不能将类型“[number, string, string, number]”分配给类型“[number, string, string | number]”。源具有 4 个元素,但目标仅允许 3 个。

这么一看,就像是一个固定大小和元素类型的数组。
但是,因为TS是JS的超集,所以元组能够使用数组的方法,即我们可以通过数组的方法让该元组不再固定大小。(这里说实在有点迷,赋值的时候元组大小固定,调方法又能让元组大小不固定)

let tuple: [number, string, number | string]

tuple = [1, 'hello', 3]

tuple.push('123')
console.log(tuple)  //  [1, 'hello', 3, '123']

当我们添加越界的元素时,类型会被限制成元组中每个类型的联合类型。

let tuple: [number, boolean]

tuple = [1, true]

tuple.push(true) //  允许越界

tuple.push('123')   // 报错:允许越界。但是越界的元素需要是元组中每个类型的联合类型
console.log(tuple)  
目录
相关文章
|
4天前
|
JavaScript 编译器
TypeScript中类型守卫:缩小类型范围的艺术
【4月更文挑战第23天】TypeScript中的类型守卫是缩小类型范围的关键技术,它帮助我们在运行时确保值的精确类型,提升代码健壮性和可读性。类型守卫包括`typeof`(检查原始类型)、`instanceof`(检查类实例)和自定义类型守卫。通过这些方法,我们可以更好地处理联合类型、泛型和不同数据源,降低运行时错误,提高代码质量。
|
4天前
|
JavaScript 前端开发 安全
Apollo与TypeScript:强大类型检查在前端开发中的应用
Apollo与TypeScript:强大类型检查在前端开发中的应用
|
4天前
|
监控 JavaScript 安全
TypeScript在员工上网行为监控中的类型安全实践
本文演示了如何使用TypeScript在员工上网行为监控系统中实现类型安全。通过定义`Website`类型和`MonitoringData`接口,确保数据准确性和可靠性。示例展示了从监控设备获取数据和提交到网站的函数,强调了类型定义在防止错误、提升代码可维护性方面的作用。
36 7
|
3天前
|
JavaScript 前端开发
TypeScript内置类型一览(Record<string,any>等等)(下)
TypeScript内置类型一览(Record<string,any>等等)
|
3天前
|
JavaScript
TypeScript内置类型一览(Record<string,any>等等)(中)
TypeScript内置类型一览(Record<string,any>等等)
|
3天前
|
JavaScript
TypeScript内置类型一览(Record<string,any>等等)(上)
TypeScript内置类型一览(Record<string,any>等等)
|
4天前
|
JavaScript 安全 前端开发
【TypeScript技术专栏】TypeScript中的类型推断与类型守卫
【4月更文挑战第30天】TypeScript的类型推断与类型守卫是提升代码安全的关键。类型推断自动识别变量类型,减少错误,包括基础、上下文、最佳通用和控制流类型推断。类型守卫则通过`typeof`、`instanceof`及自定义函数在运行时确认变量类型,确保类型安全。两者结合使用,优化开发体验,助力构建健壮应用。
|
4天前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript类型系统与接口详解
【4月更文挑战第30天】TypeScript扩展JavaScript,引入静态类型检查以减少错误。其类型系统包括基本类型、数组等,而接口是定义对象结构的机制。接口描述对象外形,不涉及实现,可用于规定对象属性和方法。通过声明、实现接口,以及利用可选、只读属性,接口继承和合并,TypeScript增强了代码的健壮性和维护性。学习和掌握TypeScript的接口对于大型项目开发至关重要。
|
4天前
|
JavaScript 安全 前端开发
【亮剑】TypeScript 由于其强类型的特性,直接为对象动态添加属性可能会遇到一些问题
【4月更文挑战第30天】本文探讨了在 TypeScript 中安全地为对象动态添加属性的方法。基础方法是使用索引签名,允许接受任何属性名但牺牲了部分类型检查。进阶方法是接口扩展,通过声明合并动态添加属性,保持类型安全但可能导致代码重复。高级方法利用 OOP 模式的类继承,确保类型安全但增加代码复杂性。选择哪种方法取决于应用场景、代码复杂性和类型安全性需求。
|
4天前
|
JavaScript 前端开发
TypeScript基础类型
TypeScript基础类型