前言

博主主页蜡笔雏田学代码
专栏链接【TypeScript专栏】
上篇文章讲解了TypeScript的一些常用类型,详细内容请阅读【TypeScript基础】TypeScript之常用类型(上)
今天继续学习TypeScript另一些常用类型!
感兴趣的小伙伴一起来看看吧~

文章目录

  • 1. 元组(Tuple)
  • 2. 类型推论
    • 声明变量并初始化时
    • 决定函数返回值时
  • 3. 类型断言
    • 如何使用类型断言
    • 技巧:console.dir()
  • 4. 字面量类型
  • 5. 枚举类型
    • 访问枚举成员
    • 枚举的值
    • 字符串枚举
    • 枚举的特点及原理
  • 6. any类型
  • 7. typeof 操作符

1. 元组(Tuple)

2. 类型推论

在TS中,某些没有明确指出类型的地方,TS的类型推论机制会帮助提供类型

换句话说,由于类型推论的存在,这些地方,类型注解可以省略不写!

发生类型推论的两种常见场景:

声明变量并初始化时

let age = 18   // 鼠标移入变量名称age,TS自动推断出变量age为number类型

决定函数返回值时

如图:省略了add()函数返回值类型(:number)

鼠标移入函数add()时,TS自动根据num1和num2两个变量的类型推断出返回值的类型是number。

注意:这两种情况下,类型注解可以省略不写

推荐:能省略类型注解的地方就省略(充分利用TS类型推论的能力,提升开发效率)。

技巧:如果不知道类型,可以通过鼠标放在变量名称上,利用VSCode的提示来查看类型。

3. 类型断言

有时候你会比TS更加明确一个值的类型,此时,可以使用类型断言来指定更具体的类型。

比如,

注意:getElementById方法返回值的类型是HTMLElement,该类型只包含所有标签公共的属性或方法,不包含a标签特有的href等属性。

因此,这个类型太宽泛(不具体),无法操作href等a标签特有的属性或方法。

解决方式:这种情况下就需要使用类型断言指定更加具体的类型

如何使用类型断言

解释:

  1. 使用 as 关键字实现类型断言。
  2. 关键字 as 后面的类型是一个更加具体的类型(HTMLAnchorElement是HTMLElement的子类型)
  3. HTMLAnchorElement是a标签对应的dom元素类型,因此通过类型断言,aLink的类型变得更加具体,这样就可以访问a标签特有的属性或方法了(比如href属性)。

另一种语法,使用语法,这种语法形式不常用知道即可:

const aLink = <HTMLAnchorElement>document.getElementById('link')

技巧:console.dir()

在浏览器控制台,通过console.dir()打印DOM元素,在属性列表的最后面,即可看到该元素的类型。

4. 字面量类型

思考以下代码,两个变量的类型分别是什么” />

解释:通过把鼠标移入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'}

​ ||

说明: 枚举与前面讲到的字面量类型+联合类型组合的功能类似,都用来表示一组明确的可选值列表。

一般情况下,推荐使用字面量类型+联合类型组合的方式,因为相比枚举,这种方式更加直观,简洁,高效。

6. any类型

原则:不推荐使用any! 这会让Typescript变为 “AnyScript” (失去TS类型保护的优势)。

因为当值的类型为any时,可以对该值进行任意操作,并且不会有代码提示

let obj: any ={ x:0 }//访问不存在的属性 或者 赋值obj.aaa = 10// 当作函数调用obj()// 赋值给其他类型的变量let n: number = obj

解释:以上操作都不会有任何类型错误提示,即使可能存在错误!

尽可能的避免使用any类型,除非临时使用any来“避免”书写很长,很复杂的类型!

其他隐式具有any类型的情况:

  1. 声明变量不提供类型也不提供默认值
  2. 函数参数不加类型。

注意:因为不推荐使用any,所以,这两种情况下都应该提供类型

7. typeof 操作符

众所周知,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) {}

解释:

  1. 使用typeof操作符来获取变量p的类型,结果与第一种(对象字面量形式的类型)相同。
  2. typeof出现在类型注解的位置(参数名称的冒号后面)所处的环境就在类型上下文(区别于JS代码)。
  3. 注意:typeof只能用来查询变量或属性的类型,无法查询其他形式的类型(比如,函数调用的类型)。
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}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!