前言
博主主页👉🏻蜡笔雏田学代码
专栏链接👉🏻【TypeScript专栏】
上篇文章讲解了TypeScript的一些常用类型,👉🏻详细内容请阅读【TypeScript基础】TypeScript之常用类型(上)
今天继续学习TypeScript另一些常用类型!
感兴趣的小伙伴一起来看看吧~🤞
在TS中,某些没有明确指出类型的地方,TS的类型推论机制会帮助提供类型。
换句话说,由于类型推论的存在,这些地方,类型注解可以省略不写!
发生类型推论的两种常见场景:
let age = 18 // 鼠标移入变量名称age,TS自动推断出变量age为number类型
如图:省略了add()函数返回值类型(:number)
鼠标移入函数add()时,TS自动根据num1和num2两个变量的类型推断出返回值的类型是number。
注意:这两种情况下,类型注解可以省略不写
推荐:能省略类型注解的地方就省略(充分利用TS类型推论的能力,提升开发效率)。
技巧:如果不知道类型,可以通过鼠标放在变量名称上,利用VSCode的提示来查看类型。
有时候你会比TS更加明确一个值的类型,此时,可以使用类型断言
来指定更具体的类型。
比如,
注意:getElementById方法返回值的类型是HTMLElement,该类型只包含所有标签公共的属性或方法,不包含a标签特有的href等属性。
因此,这个类型太宽泛(不具体),无法操作href等a标签特有的属性或方法。
解决方式:这种情况下就需要使用类型断言指定更加具体的类型。
解释:
另一种语法,使用<>语法,这种语法形式不常用知道即可:
const aLink = <HTMLAnchorElement>document.getElementById('link')
在浏览器控制台,通过console.dir()打印DOM元素,在属性列表的最后面,即可看到该元素的类型。
思考以下代码,两个变量的类型分别是什么?
let str1 = 'Hello TS'
const str2 = 'Hello TS'
通过TS类型推论机制,可以得到答案:
- 变量str1的类型为:string。
- 变量str2的类型为:’Hello TS‘。
解释:
- str1是一个变量(let) , 它的值可以是任意字符串,所以类型为:string。
- str2是一个常量(const), 它的值不能变化只能是’Hello TS‘, 所以, 它的类型为:’Hello TS‘。
注意:此处的’Hello TS‘, 就是一个字面量类型。也就是说某个特定的字符串也可以作为TS中的类型。
除字符串外,任意的JS字面量(比如,对象,数字等)都可以作为类型使用。
比如,在贪吃蛇游戏中,游戏的方向的可选值只能是上,下,左,右中的任意一个。
function changeDirection(direction: 'up' | 'down' | 'left' | 'right') {
console.log(direction)
}
解释:参数direction的值只能是up/down/left/right中的任意一个。
优势:相比于string类型,使用字面量类型更加精确,严谨。
枚举的功能类似于字面量类型+联合类型组合的功能,也可以表示一组明确的可选值。
枚举:定义一组命名常量
。它描述一个值,该值可以是这些命名常量中的一个。
enum Direction { Up, Down, Left, Right }
function changeDirection(direction: Direction) {
console.log(direction)
}
解释:
- 使用
enum
关键字定义枚举。- 约定枚举名称,枚举中的值以
大写字母
开头。- 枚举中的多个值之间通过
,(逗号)
分隔。- 定义好枚举后,直接使用
枚举名称
作为类型注解。
注意:形参direction的类型为枚举Direction,那么,实参的值就应该是枚举Direction成员的任意一个。
enum Direction { Up, Down, Left, Right }
function changeDirection(direction: Direction) {
console.log(direction)
}
changeDirection(Direction.Up)
解释:类似于JS中的对象,直接通过点(.)语法访问枚举的成员。
问题:我们把枚举成员作为了函数的实参,它的值是什么呢?
解释:通过把鼠标移入Direction.Up,可以看到枚举成员Up的值为0.
注意:枚举成员是有值的,默认为:从0开始自增的数值。
我们把 枚举成员的值为数字的枚举
,称为:数字枚举。
当然,也可以给枚举中的成员初始化值。
//成员设置初始值:Down ->11, Left -> 12, Right -> 13
enum Direction {
Up=10,
Down,
Left,
Right
}
enum Direction {
Up=10,
Down=34,
Left=4,
Right=5
}
枚举成员的值是字符串
。
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT'
}
注意:字符串枚举没有自增长行为,因此,字符串枚举的每个成员必须有初始值。
枚举是TS为数不多的非JavaScript类型级扩展(不仅仅是类型)的特性之一。
因为:其他类型仅仅被当做类型,而枚举不仅用作类型,还提供值(枚举成员都是有值的)。
也就是说,其他类型会在编译为JS代码时自动移除。但是,枚举类型会被编译为JS代码!
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT'
}
||
说明: 枚举与前面讲到的字面量类型+联合类型组合的功能类似,都用来表示一组明确的可选值列表。
一般情况下,推荐使用字面量类型+联合类型组合的方式,因为相比枚举,这种方式更加直观,简洁,高效。
原则:不推荐使用any!
这会让Typescript变为 “AnyScript” (失去TS类型保护的优势)。
因为当值的类型为any时,可以对该值进行任意操作,并且不会有代码提示。
let obj: any ={ x:0 }
//访问不存在的属性 或者 赋值
obj.aaa = 10
// 当作函数调用
obj()
// 赋值给其他类型的变量
let n: number = obj
解释:以上操作都不会有任何类型错误提示,即使可能存在错误!
尽可能的避免使用any类型,除非临时使用any来“避免”书写很长,很复杂的类型!
其他隐式具有any类型的情况:
- 声明变量不提供类型也不提供默认值
- 函数参数不加类型。
注意:因为不推荐使用any,所以,这两种情况下都应该提供类型!
众所周知,JS中提供了typeof操作符,用来在JS中获取数据的类型。
console.log(typeof 'HELLO TS') //打印string
实际上,TS也提供了typeof操作符:可以在类型上下文中引用变量或属性的类型(类型查询)。
使用场景:根据已有变量的值,获取该值的类型,来简化类型的书写。
let p = { x: 1, y: 2 }
function formatPoint(point: { x: number; y: number}) {}
formatPoint(p)
let p = { x: 1, y: 2 }
function formatPoint(point: typeof p) {}
解释:
let p = { x: 1, y: 2 }
let num: typeof p.x //查询p对象中x属性的类型 num对象的类型为number
今天的分享就到这里啦✨ \textcolor{red}{今天的分享就到这里啦✨} 今天的分享就到这里啦✨
原创不易,还希望各位大佬支持一下 \textcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下
🤞 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!