TS类型系统概述

一、类型注解

TspeScript是js的超集，拥有js所有功能，并且额外增加了：类型系统
在js中也有类型，但是js不会检查变量类型是否发生改变
TS类型系统优势：可以显示标记出代码中的意外行为，从而降低发生错误的可能性
示列代码：

let age1 = 18  // js定义变量

let age2: number = 18  // TS变量定义

//  说明：代码中的 : number 就是类型注解
//  作用：为变量添加类型约束。比如，上述代码中，约定变量 age 的类型为 number 类型
//  解释：约定了什么类型，就只能给变量赋值该类型的值，否则，就会报错
//  约定了类型之后，代码的提示就会非常的清晰

二、类型推论

TS的类型推论机制会帮助提供类型，在以下两种情况下，类型注解可以省略不写：
(1).声明变量并初始化
(2).确定函数返回值时
示例代码

// 变量 age 的类型被自动推断为：number
let age = 18

// 函数返回值的类型被自动推断为：number
function add(num1: number, num2: number): number {
  return num1 + num2
}

推荐：能省略类型注解的地方就省略（充分利用TS类型推论的能力，提升开发效率）
技巧：如果不知道类型，可以通过鼠标放在变量名称上，利用 VSCode 的提示来查看类型

三、数组类型

• 数组类型的两种写法

// 写法一: 类型[]
let arr1: number[] = [1, 3, 5]

// 写法二：Array<类型>
let arr2: Array<string> = ['a', 'b', 'c']

• 推荐使用 number[] 写法

四、联合类型

如果数组中既有number类型，又有string类型，可以通过联合类型书写——'|'

// 定义一个变量，类型是number 或者 null
let timer: number | null = null
timer = setInterval(() => {}, 1000)

// 定义一个数组，数组中可以有数字或者字符串
// 需要注意 | 的优先级
let arr: (number | string)[] = [1, 'abc', 2]

五、类型别名-type(重要)

给类型起别名 type 别名 = 类型 作用：给类型起了别名，定义了新的类型 示例代码

type s = string // 定义  

const str1:s = 'abc'

const str2:string = 'abc'

可以给复杂的类型起别名
别名可以是任意合法字符，首字母大写

// type NewType = string | number  
// let a: NewType = 1 
// let b: NewType = '1'  
// let arr: NewType[] = [1, '1']

type MyArr = (number | string) [] 
const arr:MyArr = [1, '1'] 

六、函数定义

1，单个定义
函数的类型实际上指的是：函数形参和返回值的类型
格式

// 普通函数 
function 函数名(形参1： 类型=默认值， 形参2：类型=默认值): 返回值类型 { }  
// 箭头函数 
const 函数名（形参1： 类型=默认值， 形参2：类型=默认值):返回值类型 => { }

代码示例：

// 函数声明 function add(num1: number, num2: number): number { return num1 + num2 }  

// 箭头函数 const add = (num1: number=10, num2: number=20): number => { return num1 + num2 }

add（1,'1') // 报错

2,统一定义函数格式
定义多个具有相同参数类型和返回值类型的函数时，代码比较累赘
我们可以把拥有相同形参和实参的函数当做一个整体，来定义
代码示例：

// 把拥有相同形参和实参的函数当做一个整体，来定义
const add1 : (n1:number,n2:number)=>number  =  (a,b)=>{return a+b }
// 提炼自定义类型
type Fn = (n1:number,n2:number)=>number  
const add1 : Fn = (a,b)=>{return a+b }

统一指定函数类型(类型别名来优化， 适用于函数表达式
3,可选参数
使用函数实现某个功能时，参数可以传也可以不传。
例如：数组的 slice 方法，可以 slice() 也可以 slice(1) 还可以 slice(1, 3)]
这种情况下，在给函数参数指定类型时，就用到可选参数了

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

如果给参数默认值，就不需要'?'了，就相当于做了可选
可选和默认值的区别
相同点： 调用函数时，可以少传参数
区别：设置了默认值之后，就是可选的了，不写就会使用默认值； 可选的并一定有值。
注意：它们不能一起使用。优先使用默认值

七、void 类型

如果函数没有返回值，那么，函数返回值类型为：void

function greet(name: string): void {   console.log('Hello', name)   // }

满足以下三种情况，函数返回值为：void

• 不写return
• 写return ，但是后面不接内容
• 写return undefined 代码示例：

// 如果什么都不写，此时，add 函数的返回值类型为： void
const add = () => {}
// 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同
const add = (): void => {}

// 但，如果指定 返回值类型为 undefined，此时，函数体中必须显示的 return undefined 才可以
const add = (): undefined => {
  // 此处，返回的 undefined 是 JS 中的一个值
  return undefined
}

void和undefined的区别

1. 如果函数没有指定返回值，调用结束之后，值是undefined的
2. 当不能直接声明返回值是undefined 代码示例：

function add(a:number, b:number): undefined { // 这里的会报错
  console.log(a,b)
}

八、对象类型

• JS 中的对象是由属性和方法构成的，而 TS 对象的类型就是在描述对象的结构（有什么类型的属性和方法）
• 对象类型的写法:

// 空对象
let person: {} = {}

// 有属性的对象
let person: { name: string } = {
  name: '同学'
}

// 既有属性又有方法的对象
// 在一行代码中指定对象的多个属性类型时，使用 `;`（分号）来分隔
let person: { name: string; sayHi(): void } = {
  name: 'jack',
  sayHi() {}
}

// 对象中如果有多个类型，可以换行写：
// 通过换行来分隔多个属性类型，可以去掉 `;`
let person: {
  name: string
  sayHi(): void
} = {
  name: 'jack',
  sayHi() {}
}

    1.  使用 `{}` 来描述对象结构
    2.  属性采用`属性名: 类型`的形式
    3.  方法采用`方法名(): 返回值类型`的形式

使用类型别名

• 注意：直接使用 {} 形式为对象添加类型，会降低代码的可读性（不好辨识类型和值）
• 推荐：使用类型别名为对象添加类型 代码示例：

// 创建类型别名
type Person = {
  name: string
  sayHi(): void
}

// 使用类型别名作为对象的类型：
let person: Person = {
  name: 'jack',
  sayHi() {}
}

对象可选属性
对象的属性或方法，也可以是可选的，此时就用到可选属性了
比如，我们在使用 axios({ ... }) 时，如果发送 GET 请求，method 属性就可以省略
可选属性的语法与函数可选参数的语法一致，都使用 ? 来表示
代码示例：

type Config = {
  url: string
  method?: string
}

function myAxios(config: Config) {
  console.log(config)
}

九、箭头函数形式的方法类型

• 方法的类型也可以使用箭头函数形式 代码示例：

{
    greet(name: string):string,
    greet: (name: string) => string
}



type Person = {
  greet: (name: string) => void
  greet(name: string):void
}

let person: Person = {
  greet(name) {
    console.log(name)
  }
}

十、接口类型

当一个对象类型被多次使用时，一般会使用接口（interface）来描述对象的类型，达到复用的目的

1. 1. 使用 interface 关键字来声明接口
   2. 接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以 I 开头
   3. 声明接口后，直接使用接口名称作为变量的类型
   4. 因为每一行只有一个属性类型，因此，属性类型后没有 ;(分号) 代码示例：

interface IPerson {
  name: string
  age: number
  sayHi(): void
}


let person: IPerson = {
  name: 'jack',
  age: 19,
  sayHi() {}
}

interface vs type

• interface（接口）和 type（类型别名）的对比：
• 相同点：都可以给对象指定类型
• 不同点:

• • 接口，只能为对象指定类型
  • 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名

• 推荐：能使用 type 就是用 type

interface IPerson {
  name: string
  age: number
  sayHi(): void
}

// 为对象类型创建类型别名
type IPerson = {
  name: string
  age: number
  sayHi(): void
}

// 为联合类型创建类型别名
type NumStr = number | string

接口继承

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

interface IPoint2D { x: number; y: number }
interface IPoint3D { x: number; y: number; z: number }

• 更好的方式:

interface IPoint2D { x: number; y: number }
// 继承 Point2D
interface IPoint3D extends IPoint2D {
  z: number
}

1. 1. 使用 extends(继承)关键字实现了接口 IPoint3D 继承 IPoint2D
   2. 继承后，IPoint3D 就有了 IPoint2D 的所有属性和方法(此时，IPoint3D 同时有 x、y、z 三个属性)

十一、元组类型

• 场景：在地图中，使用经纬度坐标来标记位置信息
• 可以使用数组来记录坐标，那么，该数组中只有两个元素，并且这两个元素都是数值类型 let position: number[] = [116.2317, 39.5427]
• 使用 number[] 的缺点：不严谨，因为该类型的数组中可以出现任意多个数字
• 更好的方式：元组 Tuple
• 元组类型是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型 let position: [number, number] = [39.5427, 116.2317]

1. 1. 元组类型可以确切地标记出有多少个元素，以及每个元素的类型
   2. 该示例中，元素有两个元素，每个元素的类型都是 number

十二、字面量类型

let str1 = 'Hello TS'
const str2 = 'Hello TS'

• 通过 TS 类型推论机制，可以得到：

1. 1. 变量 str1 的类型为：string
   2. 变量 str2 的类型为：'Hello TS'
2. str1 是一个变量(let)，它的值可以是任意字符串，所以类型为:string
3. str2 是一个常量(const)，它的值不能变化只能是 'Hello TS'，所以，它的类型为:'Hello TS'

• 注意：此处的 'Hello TS'，就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型
• 任意的 JS 字面量（比如，对象、数字等）都可以作为类型使用

• 字面量：`{ name: 'jack' }` `[]` `18` `20` `'abc'` `false` `function() {}`
  

使用模式和场景

• 使用模式：字面量类型配合联合类型一起使用
• 使用场景：用来表示一组明确的可选值列表
• 比如，在贪吃蛇游戏中，游戏的方向的可选值只能是上、下、左、右中的任意一个

// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'

function changeDirection(direction: Direction) {
  console.log(direction)
}

// 调用函数时，会有类型提示：
changeDirection('up')

• 解释：参数 direction 的值只能是 up/down/left/right 中的任意一个
• 优势：相比于 string 类型，使用字面量类型更加精确、严谨

十三、类型断言

有时候你会比 TS 更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型。 比如

const aLink = document.getElementById('link')

• 注意：该方法返回值的类型是 HTMLElement，该类型只包含所有标签公共的属性或方法，不包含 a 标签特有的 href 等属性
• 因此，这个类型太宽泛(不具体) ，无法操作 href 等 a 标签特有的属性或方法
• 解决方式：这种情况下就需要使用类型断言指定更加具体的类型
• 使用类型断言：

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

1. 1. 使用 as 关键字实现类型断言
   2. 关键字 as 后面的类型是一个更加具体的类型（HTMLAnchorElement 是 HTMLElement 的子类型）
   3. 通过类型断言，aLink 的类型变得更加具体，这样就可以访问 a 标签特有的属性或方法了 另一种语法，使用 <> 语法，这种语法形式不常用，知道即可:

// 该语法，知道即可：
const aLink = <HTMLAnchorElement>document.getElementById('link')