TypeScript 入门:作用域、Object 类型

勾勾的前端世界

共 2452字,需浏览 5分钟

 ·

2021-07-11 12:09

上两篇内容:

我们为什么要学习 TypeScript?

TypeScript 入门应用:类型系统和配置文件


作用域问题


即便不同文件中,有相同变量名字,也会出现变量名同名的错误。可以使用立即执行函数,包装作用域。

(  function () {    consta: number =66;    constb: string ='bbb';  })()


立即执行函数并不方便使用,这里我们使用 ES6 中的模块化是以文件为单位的,在代码的末尾,使用 export{} 来标注模块化代码文件,模块与模块之间的作用域是相互独立的。

const a: number =66;const b: string ='bbb';
export{}


真实开发场景下,一般都是使用模块化语法规则导入导出的。

 

Object 类型


TS 中的 Object 类型,包含了数组、函数和对象

const f1:object =function(){}const a1:object = []const o1:object = {}
export {}


对象的具体类型限制,标注的对象要具体属性名字及类型,值必须一一对应,不能多也不能少。

// 具体标注对象类型,标注的对象要具体属性名字及类型,值必须一一对应const o2:{n1:number,s2:string} = {n1:666,s2:'xilinglaoshi'}


当然,更专业的还是使用接口的方式。

 

数组


普通数组的定义

数组的定义有两种方式,使用泛型普通标注

// xx:类型<元素类型> const arr:Array<number>= [2,3,66]// 纯数字类型数组const arr2:number[] = [66,77,88]


元组类型

明确元素数量及元素类型的数组。

// 元组类型(多类型的数组)const tuple:[number,string] = [66,'xiling']
// 当作普通数组操作获取const age = tuple[0]const username = tuple[1]// 解构赋值const [ages,names] = tuple


枚举类型

枚举类型在其他编程语言中很是常见,但是 JS 中却没有,枚举类型能做什么什么呢?


先看一个小案例:

const post = {  title:'一块手表的逆袭',  content:'曾经有一块非常廉价的手表,出生在罗马帝国……',  status:0//文章状态 2发表,1未发表, 0草稿}


状态标识 status 属性,容易混乱更容易忘记,还会乱入其他值,以往我们会使用一个对象标注状态,比如:

const PostStatus = {  Draft:0  Unpublished:1,  Published:2}
const post = { title:'一块手表的逆袭', content:'曾经有一块非常廉价的手表,出生在罗马帝国……', status: PostStatus.Published////文章状态 2发表,1未发表, 0草稿}


而如果使用枚举类型,我们就可以这样了:

// 定义枚举类型的数据,enum PostStatus {  Draft=0,  Unpublished=1,  Published=2}
const post = { title:'一块手表的逆袭', content:'曾经有一块非常廉价的手表,出生在罗马帝国……', // 枚举类型的使用与对象一样 status: PostStatus.Published}


看着好像并没有什么区别,其实枚举最大的作用在于可以递增,如果不赋值,则默认从零,如果给第一个赋值,则从第一个数值开始累加。


// 定义枚举类型的数据,enum PostStatus {  Draft=6,//赋值,则累加,不赋值则从 0 开始  Unpublished,  Published}
const post = { title:'一块手表的逆袭', content:'曾经有一块非常廉价的手表,出生在罗马帝国……', // 枚举类型的使用与对象一样 status: PostStatus.Published}
console.log(post)


当然,枚举类型的值,也可以是字符串,但是字符串是无法累加的,因此,极为少见,这里就不介绍了。


我们可以进行编译,然后查看结果。我们能够发现,是一个双向的键值对对象,就是可以通过键获取值,也可以通过值获取键,编译后就能看到,无非就是将表达式作为键存储起来而已。这样做,我们就可以在 ts 中,通过下标的方式,获取枚举的名称了。


如果我们确认在代码中,不会使用使用索引获取枚举名称,那我建议大家使用常量枚举,编译过后我们能在 JS 代码中看到,枚举代码已经被移除了,代码中直接使用了具体的值,并且会使用注释标注类型名称。


// 定义枚举类型的数据,constenum PostStatus {  Draft=6,//赋值,则累加,不赋值则从 0 开始  Unpublished,  Published}
const post = { title:'一块手表的逆袭', content:'曾经有一块非常廉价的手表,出生在罗马帝国……', // 枚举类型的使用与对象一样 status: PostStatus.Published}
console.log(post)


未完待续...


推荐阅读:

前端工程化中的重要环节——自动化构建

效率提升利器:你还害怕自动化部署吗


更新不易,点个“在看”和“”吧(●'◡'●)!

浏览 35
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

举报