6.8、类型别名
类型别名（自定义类型）：为任意类型起别名。
使用场景：当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用。
type snow = (number | string)[] let arr1: snow = [1, 2, 3, 'a', 'b', 'c']
解释：
1，使用 type 关键字来创建类型别名。
2，类型别名（比如，此处的snow），可以是任意合法的变量名称。
3，创建类型别名后，直接使用该类型别名作为变量的类型注解即可。
6.9、函数类型（1，单独指定参数和返回值的类型）
函数的类型实际上指的是：函数的参数和返回值的类型。
为函数指定类型的两种方式：1单独指定参数、返回值的类型 2 同时指定参数、返回值的类型。
1、单独指定参数、返回值的类型：
// 普通函数 function add(num1: number, num2: number): number{ return num1 + num2 } // 箭头函数 const add = (num1: number, num2: number): number => { return num1 + num2 }
定义了参数，调用时候需要传入对应类型的参数。 返回值同理（除了void、any）。
6.10、函数类型（同时指定参数和返回值的类型）
const add: (num1: number, num2: number) => number = (num1, num2) => { return num1 + num2 }
因为前边参数加过类型了，后边就不需要再指定了。
解释：当函数作为表达式时，可以通过类似箭头函数的语法来为函数添加类型。
注意：这种形式只适用于函数表达式。
6.11、void类型
如果函数没有返回值，那么，函数返回值的类型为：void。
function snow(name: string) :vlid { console.log(name) }
void：语义为空。
使用场景：没有返回值时候 使用 返回值类型 void。
6.12、函数可选参数
使用函数实现某个功能时，参数可以传也可以不传。这种情况下，在给函数参数指定类型时，就用到了可选参数。比如slice()方法，可以slice()也可以slice(1)还可以slice(1, 2)。
function snowSlice(start?: number, end?: number): void { console.log('起始索引：' start, '结束索引：', end) } function snowSlice2(start: number, end?: number): void { console.log('起始索引：' start, '结束索引：', end) }
可选参数：在可传可不传的参数名称后面添加？（问号）。
注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数。
6.13、对象类型
let person: { name: string; age: number; sayHi(): void} = { name: 'snow', age: 18, sayHi(){} }
解释：
1、直接使用{}来描述对象结构。属性采用属性名：类型的形式；方法采用方法名（）：返回值类型的形式。
2、如果方法有参数，就在方法名后面的小括号中指定参数类型（比如：greet（name：string
）：void）。
3、在一行代码中指定对象的多个属性类型时，使用；（分号）来隔开。
如果一行代码只指定一个属性类型（通过换行来分隔多个属性类型），可以去掉；（分号）。
方法的类型也可以使用箭头函数的形式（比如：{sayHi：（）=> void}）。
6.14、对象可选属性
对象的属性或方法，也可以是可选的，此时就用到了可选属性。
比如，我们在使用axios（{...}）时，如果发送GET请求，method属性就是可以省略的。
function myAxios(config: {url: string; method?: string}){ console.log(config) }
可选属性的语法于函数可选参数的语法一致，都使用？（问好）来表示。
6.15、接口
当一个对象类型被多次使用时，一般会使用接口（interface）来描述对象的类型，达到服用的目的。
interface IPerson { name: string age: number sayHi(): void } let person: IPerson = { name: 'snow', age: 18, sayHi(){} }
解释：
1、使用interface关键字来声明接口。
2、接口名称（比如，此处的IPerson），可以是任意合法的变量名。
3、声明接口后，直接使用接口名称作为变量的类型。
4、因为每一行只有一个属性类型，因此，属性类型后没有；（分号）。
6.16、接口和类型别名的对比
相同点：都可以给对象指定类型。
不同点：
接口，只能为对象指定类型。
类型别名：不仅可以为对象指定类型，实际上可以为任意类型指定别名。
interface IPerson{
name: string
age: number
sayHi(): void
}
type IPersion = {
name: string
age: number
sayHi(): void
}
type NumStr = number | string
6.17、接口继承
如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承实现服用。比如，这两个x、y两个属性，重复写两次，可以，但很繁琐。
interface Point2D { x: number; y: number;}
interface Point3D { x: number; y: number; z: number }
更好的方式：
interface Point2D { x: number; y: number }
interface Point3D extends Point2D { z: number }
解释：
1、使用extends（继承）关键字实现了接口Point3D继承Point2D。
2、继承后，Point3D 就有了Point2D的所有属性和方法（此时，Point3D同时有 x，y，z三个属性）。
6.18、元组
场景：在地图中，使用经纬度坐标记录位置信息。
可以使用数组来记录坐标，那么，该数组中只有两个元素，并且这两个元素都是数值类型。
let position: number[] = [39.5427, 116.2317]
使用number[] 的缺点：不严谨，因为该类型中数组可以出现任意多个数字。
更好的方式可以使用“元组”。
元组类型是另一种类型的数组，它确切的知道包含多少个元素，及特定索引对应的类型。
let position: [number, number] = [39.5427, 116.2317]
解释：
1、元组类型可以确切的标记出有多少个元素，及每个元素的类型。
2、该实例中，元素有两个元素，每个元素的类型都是number。
6.19、类型推论
在TS中，某些没有明确指出类型的地方，TS的类型推断机制回帮助提供类型。
换句话说：由于类型推论的存在，这些地方，类型注解可以省略不写！
发生类型推论的两种场景：1、声明变量并初始化时；2、决定函数返回值时。
let age = 18 // TS自动推断出变量 age 为 number 类型
function add(num1: number, num2: number) { return num1 + num2 }
注意：这两种情况下，类型注解可以省略不写！
推荐：能省略注解的地方就省略（偷懒，充分利用TS类型推论的能力，提升开发效率）
技巧：如果不知道类型，可以通过鼠标放在标量名称上，利用VSCode的提示来查看类型。
6.20、类型断言
有时候你会比TS更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型。
举例一
<a href="https:www.snow.com" id="link">snow</a>
const aLink = document.getElementById("link")
注意：getElementById方法返回值的类型是HTMLElement，该类型只包含所有标签的属性或方法，不包含a标签特有的href等属性。
因此，这个类型太宽泛（不具体），无法操作href等a标签特有的属性或方法。
解决方式：这种情况下就需要使用类型断言指定更加具体的类型。
const aLink = document.getElementById("link") as HTMLAnchorElement
解释：
1、使用as关键字实现类型断言。
2、关键字 as 后面的类型是一个更加具体的类型（HTMLAnchorElement是HTMLElement的子类型）
3、通过类型断言 ，aLink的类型变得更加具体，这样就可以访问a标签特有的属性或方法了。
另一种语法，使用<>语法，这种语法形式不常用知道即可：
const aLink = <HTMLAnchorElement>document.getElementById("link")
技巧：在浏览器控制台，通过console.dir() 打印DOM元素，在属性列表的最后面，即可看到该元素的类型。
vue3+ts：shims-vue.d.ts_snow@li的博客-CSDN博客
6.21、字面量类型
思考一下代码，两个变量的类型分别是什么？
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字面量（比如，对象、数字等）都可以作为类型使用。
使用模式：字面量类型配合联合类型一起使用。
使用场景：用来标识一组明确的可选值列表。
比如，在贪吃蛇游戏中，游戏的方向可选值只能是 “上、下、左、右” 中的任意一个
function changeDirection(direction: "up" | "down" | "left" | "right"){
console.log(direction)
}
解释：参数direction的值只能是up/down/left/right中的任意一个。
优势：相比于string类型，使用字面量类型更加精确、严谨。
6.22、枚举类型
枚举的功能类似于字面量类型+联合类型组合的功能，也可以标识一组明确的可选值。
枚举：定义一组命名常量。它描述一个值，该值可以是这些命名常量中的一个。
enum Direction { Up, Down, Left, Right } function changeDirection(direction: Direction) { console.log(direction) }
解释：
1、使用 enum 关键字定义枚举。
2、约定枚举名称，枚举中的值以大写字母开头。
3、枚举中多个值之间通过 ，（逗号）分隔。
4、定义枚举后，直接使用枚举名称作为类型注解。
6.23、枚举成员的值以及数字枚举
问题：我们把枚举成员作为了函数的实参，它的值是什么呢？
changeDirection(Direction.Up)
解释：通过将鼠标移入Direction.Up，可以看到枚举成员Up的值为0。
注意：枚举成员是有值的，默认为：从0开始自增的数值。
我们把，枚举成员的值为数字的枚举，称为：数字枚举。
当然，也可以给枚举中的成员初始化值。
enum Direction { Up = 10, Down, Left, Right }
enum Direction { Up = 10, Down = 4, Left = 8, Right = 16 }
6.24、字符串枚举
字符串枚举：枚举成员的值是字符串。
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT"
}
注意：字符串枚举没有自增长行为（不能一部分是数字类型，一部分是字符串类型），因此，字符串枚举的每个成员必须有初始值。
