文章内容输出来源：拉勾教育大前端高薪训练营
文章说明：文章内容为学习笔记，学徒之心，仅为分享; 如若有误，请在评论区指出，如若您觉得文章内容对您有一点点帮助，请点赞、关注、评论，共享

上一篇：第一阶段.模块二：学习笔记-TypeSrcipt的类型推论和兼容性
下一篇：第一阶段.模块二：学习笔记-TypeSrcipt的高阶特性二

ts 中的高阶类型（1）

1-交叉类型

// 例如：一个函数，它的参数是传入 2个对象，返回一个新的对象，新对象 是对 参数对象 的整合
// 这个时候，该函数的返回值类型既是 参数1的类型，也是 参数2 的类型，
// 这种情况的返回值 类型，就可以叫做 交叉类型
// 交叉类型 使用 & 符号来表示 类型1 & 类型2

const myObj = <T, U>(obj1: T, obj2: U): T & U => {
  //   let res = <T & U>{} // 使用类型断言，来给变量设置类型
  let res = {} as T & U // ts语法推荐的写法
  res = Object.assign(obj1, obj2)
  return res // 因为函数的返回值类型是 T & U 所以 res的类型也要是 T & U
}
myObj({ a: 1 }, {b:2})

2-联合类型

// 联合类型 就是类型 满足 规定的 一种 就可以
// 变量: type1 | type2 | type3 ...

3-类型保护

能在特定的区块中保证变量属于某种确定的类型
可以在此区块中放心的引用此类型的属性,或者调用此类型的方法

方式一：is:创建类型保护函数
// 使用 关键字 is 来实现
// 一般都创建一个函数来实现复杂的类型的判断const obj = [123, 'hello']


const obj = [123, 'hello']
const getVlaue = () => {
  const num = Math.random() * 10
  if (num > 5) {
    return obj[0]
  } else {
    return obj[1]
  }
}

const item = getVlaue()

// 定义类型保护函数
const typePro = (val: number | string): val is string => {
  // 返回值是布尔值,但是用  类型保护 来作为返回值了
  return typeof val === 'string'
}

// 使用类型保护函数
if (typePro(item)) {
  console.log('值是字符串' + item)
} else {
  console.log('值是数值' + item)
}


方式二：typeof 关键字
// 简单类型的判断使用 typeof
// 写法：typeof item  === numner
// 注意：typeof 作为类型保护来使用的时候
// 只能和string/number/boolean/symbol 中的一种 来进行比较
// 只能用 === 或者 !== 来判断

if (typeof item === 'string') {
  console.log('值是字符串' + item)
} else {
  console.log('值是数值' + item)
}

方式三：instanceof关键字
// 使用 instanceof 必须要创建类 才可以
// 因为 instanceof 是用来比较， 实例 是否是某个类 创造出来的
class ClassA {
  age = 18
  constructor() {}
}
class ClassB {
  name = 'hello'
  constructor() {}
}
const getVlaue = () => {
  return Math.random() < 0.5 ? new ClassA() : new ClassB()
}
const item = getVlaue() // 返回的是实例

// instanceof 类型保护
if (item instanceof ClassA) {
  console.log(item.age)
} else {
  console.log(item.name)
}

方式四：in 关键字
好像和使用 instanceof关键字 的用法相同

4-null 和 undefined

// null 和 undefined 时候任何类型的子类型
// ts中，null 和 undefined 是会区别对待的
例如：
string | undefined
string | null
string | null | undefined
是3种完全不同的类型

5-类型保护和类型断言

// 类型保护
函数的参数，或者定义的属性，是联合类型或者any类型的时候（不唯一的类型），
这时候需要做一些类型的判断， 就要用到类型保护

// 类型断言
函数的参数，或者定义的属性，是联合类型或者any类型的时候（不唯一的类型），
这时候需要 明确一下，返回的值具体是哪种类型，可以用类型断言来处理
类型断言只是用来判断变量的数据类型，是不能用来转换变量的数据类型的

类型断言写法一：
“尖括号”语法：<string>name

类型断言写法二：
as语法：name  as string

let someValue: any = "this is a string";
// '尖括号'语法：<类型>值
let strLength: number = (<string>someValue).length;
// 'as'语法：值 as 类型
let strLength: number = (someValue as string).length;

6-类型别名

类型别名写法：使用 type 关键字， 首字母大写
例如：
type TypeString = string
let str: TypeString

7-字面量类型

字面量类型有点像，自己定义类型，就是自己定义一个类型，然后来使用
类型别名写法：使用 type 关键字 ,首字母大写

方式一：字符串字面量
例如：
// 定义一个字面量类型，定义属性要使用的时候，必须符合定义的字面量类型才行
type Name = 'hello'
const name:Name = 'hello' // 正确
const name:Name = 'world' // 报错

方式二：数值字面量
例如：
// 定义一个数值类型，定义属性要使用的时候，必须符合定义的字面量类型才行
type Age = 18
const age:Age = 18

8-枚举成员类型

// 都不带初始值的枚举成员 enum Role {A,B,C,D}
// 有初始值，值都为字符串的字面量 enum Role {A = 'a',B = 'b',C = 'c',D = 'd'}
// 有初始值，值都为数值的字面量 enum Role {A = -1,B = -2,C = 0,D = 1}
上面3条，满足任意一条，该枚举本身/枚举内的成员 就可以作为类型来使用

枚举成员类型：
enum Animals {
 Dog = 1,
 Cat = 2,
}
interface Dog {
  type: Animals.Dog // 用的是枚举内部的属性的名字来定义类型的
}

const dog:Dog = {
  // type: Animals.Cat // 不能将类型“Animals.Cat”分配给类型“Animals.Dog”
  type: Animals.Dog
}

联合枚举类型
enum Animals {
 Dog = 1,
 Cat = 2,
}
interface Dog {
  type: Animals // 用的是枚举的名字来定义类型的
}

const dog:Dog = {
  type: Animals.Dog
}

9-可辨识联合/标签联合

便于开发人员，来写代码，有提示的
2个要素：
（1）具有普通的单例类型属性 --> 作为一个特征，也就是标识来使用
（2）一个类型别名包含了哪些类型的联合

可辨识联合的完整性检查：
方式一：把tsconfig.json文件中的 "strictNullChecks": true  打开
方式二：定义 asserNever函数来实现
function assertNever(value: never): never {
  throw new Error('Unexpected object:' + value)
}

-----------------
-----------------
interface Square {
  kind: 'sauqre'
  size: number
}

interface Rectangle {
  kind: 'rectangle'
  width: number
  height: number
}

interface Circle {
  kind: 'circle'
  radius: number
}
// 定义联合类型
type Shape = Square | Rectangle | Circle
// 可辨识联合的完整性检查的函数
// 如果自己少写了代码，会有报错提示的
function assertNever(value: never): never {
  throw new Error('Unexpected object:' + value)
}

function mianji(s: Shape) {
  switch (s.kind) {
    case 'sauqre':
      return s.size * s.size
      break
    case 'rectangle':
      return s.height * s.width
      break
    case 'circle':
      return Math.PI * s.radius ** 2
      break
    // 调用可辨识联合的完整性检查的函数
    // 如果自己少写了代码，会有报错提示的
    default:
      return assertNever(s)
  }
}
const value = mianji({
  kind: 'rectangle',
  width: 10,
  height: 10
})
console.log(value)

结语：
来拉钩教育训练营学习已经有三周了，在没有来之前，我都是回家之后打游戏（游戏名：斗战神），来到这里之后才发现居然还有很多大佬也在学习，真的很惊讶，本人自身水平垃圾的一批，再不学习，以后可能一直就是混吃等死的状态了

• 首先来说，拉钩的课程很干，每个视频很短，都是干货，讲师没有一句废话，视频内容覆盖比较广，布置的作业也比较符合实际，导师也会及时批改，然后一周或两周必有直播，直播都会回答学习过程中所遇到的问题和新的内容
• 其次来说，每个班都有班级群，群里居然还有5年或6年的前端开发的大佬(⊙▽⊙)； 班主任和导师也在群里，有任何问题都可以在群里@导师，班级群真的很活跃
• 最后来说一句，如果有其他人也是在打游戏混日子，不如来拉钩教育训练营，尝试着改变一下自己目前所处的环境