文章內(nèi)容輸出來源：拉勾教育大前端高薪訓(xùn)練營
文章說明：文章內(nèi)容為學(xué)習(xí)筆記模叙，學(xué)徒之心范咨，僅為分享; 如若有誤渠啊，請在評論區(qū)指出，如若您覺得文章內(nèi)容對您有一點(diǎn)點(diǎn)幫助贯溅，請點(diǎn)贊、關(guān)注译柏、評論艇纺，共享

上一篇：第一階段.模塊二：學(xué)習(xí)筆記-TypeSrcipt的類型推論和兼容性
下一篇：第一階段.模塊二：學(xué)習(xí)筆記-TypeSrcipt的高階特性二

ts 中的高階類型（1）

1-交叉類型

// 例如：一個函數(shù)黔衡，它的參數(shù)是傳入 2個對象腌乡，返回一個新的對象与纽，新對象 是對 參數(shù)對象 的整合
// 這個時候急迂，該函數(shù)的返回值類型既是 參數(shù)1的類型，也是 參數(shù)2 的類型猴娩，
// 這種情況的返回值 類型卷中，就可以叫做 交叉類型
// 交叉類型 使用 & 符號來表示 類型1 & 類型2

const myObj = <T, U>(obj1: T, obj2: U): T & U => {
  //   let res = <T & U>{} // 使用類型斷言渊抽，來給變量設(shè)置類型
  let res = {} as T & U // ts語法推薦的寫法
  res = Object.assign(obj1, obj2)
  return res // 因?yàn)楹瘮?shù)的返回值類型是 T & U 所以 res的類型也要是 T & U
}
myObj({ a: 1 }, {b:2})

2-聯(lián)合類型

// 聯(lián)合類型 就是類型 滿足 規(guī)定的 一種 就可以
// 變量: type1 | type2 | type3 ...

3-類型保護(hù)

能在特定的區(qū)塊中保證變量屬于某種確定的類型
可以在此區(qū)塊中放心的引用此類型的屬性,或者調(diào)用此類型的方法

方式一：is:創(chuàng)建類型保護(hù)函數(shù)
// 使用 關(guān)鍵字 is 來實(shí)現(xiàn)
// 一般都創(chuàng)建一個函數(shù)來實(shí)現(xiàn)復(fù)雜的類型的判斷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()

// 定義類型保護(hù)函數(shù)
const typePro = (val: number | string): val is string => {
  // 返回值是布爾值,但是用  類型保護(hù) 來作為返回值了
  return typeof val === 'string'
}

// 使用類型保護(hù)函數(shù)
if (typePro(item)) {
  console.log('值是字符串' + item)
} else {
  console.log('值是數(shù)值' + item)
}


方式二：typeof 關(guān)鍵字
// 簡單類型的判斷使用 typeof
// 寫法：typeof item  === numner
// 注意：typeof 作為類型保護(hù)來使用的時候
// 只能和string/number/boolean/symbol 中的一種 來進(jìn)行比較
// 只能用 === 或者 !== 來判斷

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

方式三：instanceof關(guān)鍵字
// 使用 instanceof 必須要創(chuàng)建類 才可以
// 因?yàn)?instanceof 是用來比較十减， 實(shí)例 是否是某個類 創(chuàng)造出來的
class ClassA {
  age = 18
  constructor() {}
}
class ClassB {
  name = 'hello'
  constructor() {}
}
const getVlaue = () => {
  return Math.random() < 0.5 ? new ClassA() : new ClassB()
}
const item = getVlaue() // 返回的是實(shí)例

// instanceof 類型保護(hù)
if (item instanceof ClassA) {
  console.log(item.age)
} else {
  console.log(item.name)
}

方式四：in 關(guān)鍵字
好像和使用 instanceof關(guān)鍵字 的用法相同

4-null 和 undefined

// null 和 undefined 時候任何類型的子類型
// ts中帮辟，null 和 undefined 是會區(qū)別對待的
例如：
string | undefined
string | null
string | null | undefined
是3種完全不同的類型

5-類型保護(hù)和類型斷言

// 類型保護(hù)
函數(shù)的參數(shù)织阅，或者定義的屬性震捣，是聯(lián)合類型或者any類型的時候（不唯一的類型）闹炉，
這時候需要做一些類型的判斷渣触， 就要用到類型保護(hù)

// 類型斷言
函數(shù)的參數(shù)嗅钻，或者定義的屬性店展，是聯(lián)合類型或者any類型的時候（不唯一的類型），
這時候需要 明確一下柳弄，返回的值具體是哪種類型碧注，可以用類型斷言來處理
類型斷言只是用來判斷變量的數(shù)據(jù)類型糖赔，是不能用來轉(zhuǎn)換變量的數(shù)據(jù)類型的

類型斷言寫法一：
“尖括號”語法：<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 關(guān)鍵字放典， 首字母大寫
例如：
type TypeString = string
let str: TypeString

7-字面量類型

字面量類型有點(diǎn)像刻撒，自己定義類型，就是自己定義一個類型，然后來使用
類型別名寫法：使用 type 關(guān)鍵字 ,首字母大寫

方式一：字符串字面量
例如：
// 定義一個字面量類型舱呻，定義屬性要使用的時候箱吕，必須符合定義的字面量類型才行
type Name = 'hello'
const name:Name = 'hello' // 正確
const name:Name = 'world' // 報錯

方式二：數(shù)值字面量
例如：
// 定義一個數(shù)值類型，定義屬性要使用的時候兆旬，必須符合定義的字面量類型才行
type Age = 18
const age:Age = 18

8-枚舉成員類型

// 都不帶初始值的枚舉成員 enum Role {A,B,C,D}
// 有初始值丽猬，值都為字符串的字面量 enum Role {A = 'a',B = 'b',C = 'c',D = 'd'}
// 有初始值，值都為數(shù)值的字面量 enum Role {A = -1,B = -2,C = 0,D = 1}
上面3條谬以，滿足任意一條由桌，該枚舉本身/枚舉內(nèi)的成員 就可以作為類型來使用

枚舉成員類型：
enum Animals {
 Dog = 1,
 Cat = 2,
}
interface Dog {
  type: Animals.Dog // 用的是枚舉內(nèi)部的屬性的名字來定義類型的
}

const dog:Dog = {
  // type: Animals.Cat // 不能將類型“Animals.Cat”分配給類型“Animals.Dog”
  type: Animals.Dog
}

聯(lián)合枚舉類型
enum Animals {
 Dog = 1,
 Cat = 2,
}
interface Dog {
  type: Animals // 用的是枚舉的名字來定義類型的
}

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

9-可辨識聯(lián)合/標(biāo)簽聯(lián)合

便于開發(fā)人員铭乾，來寫代碼，有提示的
2個要素：
（1）具有普通的單例類型屬性 --> 作為一個特征炕檩，也就是標(biāo)識來使用
（2）一個類型別名包含了哪些類型的聯(lián)合

可辨識聯(lián)合的完整性檢查：
方式一：把tsconfig.json文件中的 "strictNullChecks": true  打開
方式二：定義 asserNever函數(shù)來實(shí)現(xiàn)
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
}
// 定義聯(lián)合類型
type Shape = Square | Rectangle | Circle
// 可辨識聯(lián)合的完整性檢查的函數(shù)
// 如果自己少寫了代碼捧书，會有報錯提示的
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
    // 調(diào)用可辨識聯(lián)合的完整性檢查的函數(shù)
    // 如果自己少寫了代碼经瓷，會有報錯提示的
    default:
      return assertNever(s)
  }
}
const value = mianji({
  kind: 'rectangle',
  width: 10,
  height: 10
})
console.log(value)

結(jié)語：
來拉鉤教育訓(xùn)練營學(xué)習(xí)已經(jīng)有三周了舆吮，在沒有來之前队贱，我都是回家之后打游戲（游戲名：斗戰(zhàn)神），來到這里之后才發(fā)現(xiàn)居然還有很多大佬也在學(xué)習(xí)锋恬，真的很驚訝与学，本人自身水平垃圾的一批，再不學(xué)習(xí)索守，以后可能一直就是混吃等死的狀態(tài)了

• 首先來說卵佛，拉鉤的課程很干截汪，每個視頻很短，都是干貨说敏，講師沒有一句廢話盔沫，視頻內(nèi)容覆蓋比較廣枫匾，布置的作業(yè)也比較符合實(shí)際干茉，導(dǎo)師也會及時批改角虫，然后一周或兩周必有直播，直播都會回答學(xué)習(xí)過程中所遇到的問題和新的內(nèi)容
• 其次來說均驶，每個班都有班級群妇穴，群里居然還有5年或6年的前端開發(fā)的大佬(⊙▽⊙)腾它； 班主任和導(dǎo)師也在群里瞒滴，有任何問題都可以在群里@導(dǎo)師赞警，班級群真的很活躍
• 最后來說一句仅颇，如果有其他人也是在打游戲混日子碘举，不如來拉鉤教育訓(xùn)練營，嘗試著改變一下自己目前所處的環(huán)境