Ⅲ.TypeScript常用类型
概述：TS 提供了 JS 的所有功能，并且额外的增加了：类型系统。
- 所有的 JS 代码都是 TS 代码。
- JS 有类型（比如：number/string等），但是 JS 不会检查变量的类型是否发生变化。而 TS 会检查。
TypeScript 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性。
3.1 类型注解
示例代码：
let age: number = 18
说明：代码中的 : number 就是类型注解。
作用：为变量添加类型约束。比如，上述代码中，约定 变量age的类型为number（数值类型）。
解释：约定了什么类型，就只能 给变量赋值该类型的值，否则，就会报错。
3.2 常用基础类型概述
可以将 TS 中的常用基础类型细分为两类：1. JS 已有类型，2.TS 新增类型。
- JS已有类型
- 原始类型：number/string/boolean/null/undefined/symbol。
- 对象类型：Object（包括：数组，对象，函数等）。
- TS 新增类型
- 联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、void、any等。
3.3 原始类型
number/string/boolean/null/undefined/symbol。
特点：简单。这些类型，完全按照 JS 中类型的名称来书写。
let age: number = 18
let myName: string = '刘老师'
let isLoading: boolean = false
//等等...
3.4 数组类型
特点：对象Object类型，在 TS 中更加细化，每个具体的对象都有自己的类型语法。
-
数组类型的两种写法：（推荐使用number[]写法）
let numbers: number[] = [1,3,5] let strings1: string[] = ['a','b','c'] let strings2: Array<string> = ['a','b','c']
需求：数组中既有 number 类型，又有 string 类型，这个数组的类型应该如何写？
let arr: (number | string)[] = [1,'a',3,'b']
解释：|（竖线）在 TS 中叫做联合类型（由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种）。
注意：这是 TS 中联合类型的语法，只有一根竖线（ | ），不要与 JS 中的或（||）混淆了。
3.5 类型别名
类型别名（自定义类型）：为任意类型起别名。
使用场景：当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用。
type CustomArray = (number | string)[]
let arr1: CustomArray = [1,'a',3,'b']
let arr2: CustomArray = ['x','y',6,7]
解释：
- 使用 type 关键字来创建类型别名。
- 类型别名（比如：此处的CustomArray），可以是任意合法的变量名称。
- 创建类型别名后，直接使用该类型别名作为变量的类型注解即可。
3.6 函数类型
函数的类型实际上指的是：函数参数和返回值的类型。
为函数指定类型的两种方式：1.单独指定参数，返回值类型。2.同时指定参数、返回值类型。
1.单独指定参数、返回值的类型：
function add1(num1: number, num2: number): number {
return num1 + num2
}
const add2 = (num1: number, num2: number): number => {
return num1 + num2
}
2.同时指定参数、返回值类型：
const add: (num1: number, num2: number) => number = (num1, num2) => {
return num1 + num2
}
解释：当函数作为表达式时，可以通过类似箭头函数形式的语法来为函数添加类型。
注意：这种形式只适用于函数表达式
3.如果函数没有返回值，那么，函数返回值类型为：void（空）。
function greet(name: string): void {
console.log('hello',name)
}
greet('jack') // 结果为： hello jack
4.使用函数实现某个功能时，参数可以传也可以不传。这种情况下，在给函数参数指定类型时，就用到可选参数了。
比如：数组的slice方法，可以slice()也可以slice(1)还可以slice(1,3)。
slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
slice()的返回值：一个新的字符串。包括字符串 stringObject 从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。
function mySlice(start?: number, end?: number): void {
console.log('起始索引：',start,'结束索引：',end)
}
可选参数：在可传可不传的参数名称后面添加 ?(问号)。
注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数。