本文已参与「新人创作礼」活动，一起开启掘金创作之路。
3.10类型推论
在TS中，某些没有明确指出类型的地方，TS的类型推论机制会帮助提供类型。
换句话说：由于类型推论的存在，这些地方，类型注解可以省略不写！
发生类型推论的2中常见场景：1声明变量并初始化时 2决定函数返回值时。
let age = 18
//鼠标移入变量名age TS自动推断出变量age为number类型
function add(num1:number,num2:number){return num1 + num2}
//TS会自动提示返回值类型时number
注意：这两种情况下，类型注释可以省略不写!
推荐：能省略类型注解的地方就省略（不是偷懒，充分利用TS类型推论的能力，提升开发效率）。
技巧：如果不知道类型，可以通过鼠标放在变量名称上，利用VSCode的提示来查看类型。
3.11类型断言
有时候你会比TS更明确一个值的类型，此时，可以使用类型断言来指定更具体的类型
比如
<a href="http://www.baidu.com" id="link">百度</a>
<script>
const aLink = document.getElementById('link');
//鼠标移动上去 显示const aLink: HTMLElement
</script>
注意：getElementById方法返回值的类型时HTMLElement，该类型只包含所有标签公共的属性或方法，不包含a标签特有href等属性。
因此，这个类型太宽泛（不具体），无法操作href等a标签特有的属性或方法。
解决方式：这种情况下就需要使用类型断言指定更加具体的类型。
使用类型断言：
<a href="http://www.baidu.com" id="link">百度</a>
<script>
const aLink = document.getElementById('link') as HTMLAnchorElement;
//鼠标移动上去 显示const aLink: HTMLElement
</script>
解释：
- 使用as关键字实现类型断言。
- 关键字as后面的类型时一个更加具体的类型（HTMLAnchorElement是HTMLElement的子类型）。
- 通过类型断言，aLink的类型变得更加具体，这样就可以访问a标签特有的属性或方法了。
另一种语法，使用<>语法，这种语法形式不常用知道即可：
const aLink = <HTMLAnchorElement>document.getElementById('link')；
// ***** 这个方法不是很常用 在写react中这个写法跟jsx语法冲突 不能使用。
技巧：在浏览器控制台，通过console.dir()打印DOM元素，在属性列表的后面，即可看到该元素的类型。
3.12字面量类型
思考一下一下代码，另个变量的类型分别是什么？
let str1 = "hello"
const str2 = "hello"
通过TS类型推论机制，可以得到答案：
- 变量str1的类型为string。
- 变量str2的类型为'hello'。
解释：
- str1是一个变量（let），它的值可以是任意字符串，所以类型为：string。
- str2是一个常量，它的值不能变化只能是'hello'，所以，它的类型为'hello'。
注意：此处的"hello"，就是一个字面量类型。也就是说某个特定的字符串也可以作为TS中的类型。除字符串外，任意的JS字面量（比如，对象，数字等）都可以作为类型使用。
使用模式：字面量类型配合联合类型一起使用。
使用场景： 用来表示一组明确地可选值列表。
比如，在贪吃蛇游戏中，游戏的方向的可选值只能是上下左右中的任意一个。
function changDirection(direction:'up' | 'down' | 'left' | 'right'){
console.log(direction)
}
解释：参数direction的值只能是up/down/left/right中的任意一个。
优势：相比于string类型，使用字面量类型更加精确、严谨。
