【TypeScript基础】TypeScript之常用类型（下）

前言

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

文章目录

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. 字面量类型

思考以下代码，两个变量的类型分别是什么?

let str1 ='Hello TS'const str2 ='Hello TS'

通过TS类型推论机制，可以得到答案：

1. 变量str1的类型为：string。
2. 变量str2的类型为：’Hello TS‘。

解释：

1. str1是一个变量(let) , 它的值可以是任意字符串，所以类型为：string。
2. str2是一个常量(const), 它的值不能变化只能是’Hello TS‘, 所以， 它的类型为：’Hello TS‘。

注意：此处的’Hello TS‘, 就是一个字面量类型。也就是说某个特定的字符串也可以作为TS中的类型。

除字符串外，任意的JS字面量（比如，对象，数字等）都可以作为类型使用。

• 使用模式：字面量类型配合联合类型一起使用。
• 使用场景：用来表示一组明确的可选值列表。

比如，在贪吃蛇游戏中，游戏的方向的可选值只能是上，下，左，右中的任意一个。

functionchangeDirection(direction:'up'|'down'|'left'|'right'){console.log(direction)}

解释：参数direction的值只能是up/down/left/right中的任意一个。

优势：相比于string类型，使用字面量类型更加精确，严谨。

5. 枚举类型

枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值。

枚举：定义一组命名常量

。它描述一个值，该值可以是这些命名常量中的一个。

enum Direction { Up, Down, Left, Right }functionchangeDirection(direction: Direction){console.log(direction)}

解释：

1. 使用enum关键字定义枚举。
2. 约定枚举名称，枚举中的值以大写字母开头。
3. 枚举中的多个值之间通过，（逗号）分隔。
4. 定义好枚举后，直接使用枚举名称作为类型注解。

注意：形参direction的类型为枚举Direction，那么，实参的值就应该是枚举Direction成员的任意一个。

访问枚举成员

enum Direction { Up, Down, Left, Right }functionchangeDirection(direction: Direction){console.log(direction)}changeDirection(Direction.Up)

解释：类似于JS中的对象，直接通过点（.）语法访问枚举的成员。

枚举的值

问题：我们把枚举成员作为了函数的实参，它的值是什么呢？

解释：通过把鼠标移入Direction.Up,可以看到枚举成员Up的值为0.

注意：枚举成员是有值的，默认为：从0开始自增的数值。

我们把

枚举成员的值为数字的枚举

，称为：数字枚举。

当然，也可以给枚举中的成员初始化值。

//成员设置初始值：Down ->11, Left -> 12, Right -> 13enum 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}functionformatPoint(point:{ x:number; y:number}){}formatPoint(p)

let p ={ x:1, y:2}functionformatPoint(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}{评论，你的意见是我进步的财富！} 
    
   
 评论，你的意见是我进步的财富！