typescript中的type（【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标签特有的属性或方法 。
解决方式：这种情况下就需要使用类型断言指定更加具体的类型 。
如何使用类型断言
解释：
使用 as 关键字实现类型断言 。 关键字 as 后面的类型是一个更加具体的类型（HTMLAnchorElement是HTMLElement的子类型） 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类型推论机制 ，可以得到答案：
变量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类型 ，使用字面量类型更加精确 ，严谨 。
5. 枚举类型
枚举的功能类似于字面量类型+联合类型组合的功能 ，也可以表示一组明确的可选值 。
枚举：定义一组命名常量 。它描述一个值 ，该值可以是这些命名常量中的一个 。
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 } ||
说明： 枚举与前面讲到的字面量类型+联合类型组合的功能类似 ，都用来表示一组明确的可选值列表 。
一般情况下 ，推荐使用字面量类型+联合类型组合的方式 ，因为相比枚举 ，这种方式更加直观 ，简洁 ，高效 。
6. any类型
原则：不推荐使用any! 这会让Typescript变为 “AnyScript ” (失去TS类型保护的优势) 。
因为当值的类型为any时 ，可以对该值进行任意操作 ，并且不会有代码提示 。
let obj: any ={ x:0 } //访问不存在的属性 或者 赋值 obj.aaa = 10 // 当作函数调用 obj() // 赋值给其他类型的变量 let n: number = obj解释：以上操作都不会有任何类型错误提示 ，即使可能存在错误！
尽可能的避免使用any类型 ，除非临时使用any来“避免 ”书写很长 ，很复杂的类型！
其他隐式具有any类型的情况：
声明变量不提供类型也不提供默认值 函数参数不加类型 。注意：因为不推荐使用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) {}解释：
使用typeof操作符来获取变量p的类型 ，结果与第一种（对象字面量形式的类型）相同 。 typeof出现在类型注解的位置（参数名称的冒号后面）所处的环境就在类型上下文（区别于JS代码） 。 注意：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}{评论 ，你的意见是我进步的财富！}
评论 ，你的意见是我进步的财富！创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！