TypeScript常用类型

1.类型别名
类型别名（自定义类型）:为任意类型起别名。
使用场景:当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用。
解释:
(1).使用type关键字来创建类型别名。
(2)．类型别名（比如，此处的CustomArray)，可以是任意合法的变量名称。
(3).创建类型别名后，直接使用该类型别名作为变量的类型注解即可。

type CustomArray = (number | string)[]
let arr: CustomArray = [1, 2, 34, '0', '99']
let temp: CustomArray = [1, 2, 34, 'aa', 'ab']

2.函数类型
函数的类型实际上指的是:函数参数和返回值的类型。
为函数指定类型的两种方式:
a.单独指定参数、返回值的类型
b.同时指定参数、返回值的类型。

(1).单独指定参数、返回值的类型:

function add(num1: number, num2: number): number {
  return num1 + num2
}
add(10, 52)

//函数表达式写法
const adds=(num1:number,num2:number):number=>{
    return num1 + num2
}
adds(12,90)

(2).为对象添加类型:
JS中的对象是由属性和方法构成的，而TS中对象的类型就是在描述对象的结构（有什么类型的属性和方法)。对象类型的写法:

let person: {
  name: string
  age: number
  sayHi(): void
  greet(name: string): void
} = {
  name: 'liu',
  age: 90,
  sayHi() {},
  greet(name) {}
}

解释:
(1).直接使用来描述对象结构。属性采用属性名:类型的形式;方法采用方法名():返回值类型的形式。
(2)．如果方法有参数，就在方法名后面的小搭号中指定参数类型（比如: greet(name: string): void)。
(3).在一行代码中指定对象的多个属性类型时，使用;(分号）来分隔。
如果一行代码只指定一个属性类型（通过换行来分隔多个属性类型)，可以去掉;(分号）。
方法的类型也可以使用箭头函数形式（比如:{sayHi: () => void })。
(3).函数可选参数
使用函数实现某个功能时，参数可以传也可以不传。这种情况下，在给函数参数指定类型时，就用到可选参数了。比如，数组的slice方法，可以slice()也可以slice(1)还可以slice(1，3)。
可选参数：在可传可不传的参数名称后面添加?（问号）
注意:可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数

function mySlice(start?: number, end?: number): void {
  console.log('起始索引:', start, '结束索引:', end)
}
mySlice()
mySlice(1)
mySlice(1, 5)

(4).对象类型(对象的属性或方法)
对象的属性或方法，也可以是可选的，此时就用到可选属性了

function myAxios(config: { url: string; method?: string }) {}
myAxios({
  url: ''
})

可选属性的语法与函数可选参数的语法一致，都使用?(问号）来表示。
3.接口
当一个对象类型被多次使用时，一般会使用接口(interface)来描述对象的类型，达到复用的目的。
解释:
（1）使用interface关键字来声明接口。
（2）接口名称（比如，此处的IPerson) ，可以是任意合法的变量名称。
（3）声明接口后，直接使用接口名称作为变量的类型。
（4）因为每一行只有一个属性类型，因此，属性类型后没有;(分号)。

// 声明一个接口
interface IPerson {
  name: string
  age: number
  sayHi(): void
}
let person: IPerson = {
  name: '刘老师',
  age: 18,
  sayHi() {}
}
let person1: IPerson = {
  name: 'jaak',
  age: 16,
  sayHi() {}
}

interface（接口）和type（类型别名）的对比:
相同点:都可以给对象指定类型。
不同点:
接口，只能为对象指定类型。
类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名。

//类型别名
type IPerson = {
  name: string
  age: string
  sayHi(): void
}
let person: IPerson = {
  name: '刘老师',
  age: '18',
  sayHi() {}
}

如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用。比如，这两个接口都有x、y两个属性，重复写两次，可以，但很繁琐。

//接口继承
interface Point2D {
  x: number
  y: number
}
interface Point3D extends Point2D {
  z: number
}
let p3: Point3D = {
  x: 90,
  y: 30,
  z: 87
}
console.log(p3, 'p3')

解释:
(1).使用extends（继承）关键字实现了接口Point3D继承Point2D。
(2)． 继承后，Point3D就有了Point2D的所有属性和方法（此时，Point3D同时有x、y、z三个属性）。

4.元祖
场景:在地图中，使用经纬度坐标来标记位置信息。
可以使用数组来记录坐标，那么，该数组中只有两个元素，并且这两个元素都是数值类型。
元祖类型是另一种类型的数组，它确切的知道包含多少个元素 以及特定索引对应的类型。

let position:[number,number]=[39.2343,11213.22]

5.类型推论
在TS中，某些没有明确指出类型的地方，TS的类型推论机制会帮助提供类型。
换句话说:由于类型推论的存在，这些地方，类型注解可以省略不写!
发生类型推论的2种常见场景:
声明变量并初始化时
决定函数返回值时

注意:如果声明变量但没有立即初始化值，此时 还必须手动添加类型注释
let a:number
a=19
function add_fun(num1: number, num2: number){
 return  num1 + num2
}

注意:这两种情况下，类型注解可以省略不写!
推荐:能省略类型注解的地方就省略（偷懒，充分利用TS类型推论的能力，提升开发效率）。
技巧:如果不知道类型，可以通过鼠标放在变量名称上，利用VSCode的提示来查看类型。
6.类型断言
有时候开发人员会比TS 更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型。
例如:a标签
注意: getElementByld方法返回值的类型是HTMLElement，该类型只包含所有标签公共的属性或方法，不包含a标签特有的href等属性。
因此，这个类型太宽泛（不具体)，无法操作href等a标签特有的属性或方法。
解决方式:这种情况下就需要使用类型断言指定更加具体的类型。
解释:
(1)．使用as关键字实现类型断言。
(2)． 关键字as后面的类型是一个更加具体的类型（HTMLAnchorElement是HTMLElement 的子类型)。3．通过类型断言，aLink的类型变得更加具体，这样就可以访问a标签特有的属性或方法了。
另一种语法，使用<>语法，这种语法形式不常用知道即可:

const aLink = document.getElementById('aLink') as HTMLAnchorElement
aLink.href=''

7.字面量类型
使用模式:字面量类型配合联合类型一起使用。使用场景:用来表示一组明确的可选值列表。
比如，在贪吃蛇游戏中，游戏的方向的可选值只能是上、下、左、右中的任意一个。
function changeDirection(direction: 'up'l ' down’l 'left' l 'right'){
console.log(direction)
}
解释:参数direction的值只能是up/down/left/right中的任意一个。优势:相比于string 类型，使用字面量类型更加精确、严谨。

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

8.枚举
枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值。
心
枚举:定义一组命名常量。它描述一个值，该值可以是这些命名常量中的一个。
enum Direction { Up,Down,Left，Right }
function changeDirection(direction: Direction) iconsole.log(direction)
}
解释:
使用enum关键字定义枚举。
约定枚举名称、枚举中的值以大写字母开头。
枚举中的多个值之间通过，(逗号）分隔。
定义好枚举后，直接使用枚举名称作为类型注解。

//定义枚举
enum Direction{
  Up,
  Down,
  Left,
  Right
}
function changeDireciton(direction:Direction ) {
  console.log(direction)
}
changeDireciton(Direction.Up)

注意:形参direction 的类型为枚举Direction，那么，实参的值就应该是枚举Direction成员的任意一个。访问枚举成员:
enum Direction { Up,Down，Left，Right }
function changeDirection(direction: Direction)iconsole.log(direction)
changeDirection(Direction. Up)
解释:类似于JS中的对象，直接通过点（.）语法访问枚举的成员。
问题:我们把枚举成员作为了函数的实参，它的值是什么呢?
enum member） Direction. Up = 0
changeDirection(Direction. Up)
解释:通过将鼠标移入Direction.Up，可以看到枚举成员Up的值为0。注意:枚举成员是有值的，默认为:从0开始自增的数值。
心
我们把，枚举成员的值为数字的枚举，称为:数字枚举。
当然，也可以给枚举中的成员初始化值。
enum Direction { Up =10，Down,Left，Right }
enum Direction { Up = 2，Down = 4，Left = 8，Right = 16}
字符串枚举:枚举成员的值是字符串。enum Direction {
Up = 'URP',Down = ''DOWN',Left = 'LEFT',Right = 'RIGHT'}
注意:字符串枚举没有自增长行为，因此，字符串枚举的每个成员必须有初始值。

//字符串枚举
enum DirectionStr {
  Up = 'up',
  Down = 'down',
  Left = 'left',
  Right = 'right'
}

枚举是TS为数不多的非JavaScript类型级扩展（不仅仅是类型）的特性之一。
因为:其他类型仅仅被当做类型，而枚举不仅用作类型，还提供值（枚举成员都是有值的)。
也就是说，其他的类型会在编译为JS代码时自动移除。但是，枚举类型会被编译为JS代码!
说明:枚举与前面讲到的字面量类型+联合类型组合的功能类似，都用来表示一组明确的可选值列表。
一般情况下，推荐使用字面量类型+联合类型组合的方式，因为相比枚举，这种方式更加直观、简洁、高效。

9. any类型
   原则:不推荐使用any!这会让TypeScript变为“AnyScript”(失去TS类型保护的优势）。因为当值的类型为any时，可以对该值进行任意操作，并且不会有代码提示。
   let obj: any = { x:0 }
   obj.bar = 100
   obj()
   const n: number = obj
   解释:以上操作都不会有任何类型错误提示，即使可能存在错误!
   尽可能的避免使用any类型，除非临时使用any来“避免”书写很长、很复杂的类型!
   其他隐式具有any类型的情况:
   1声明变量不提供类型也不提供默认值
   ⒉函数参数不加类型。注意:因为不推荐使用any ，所以，这两种情况下都应该提供类型!