TS-4 類型收窄

  • 聯合類型 |,是求并集
type A = {
  name:string
}

type B = {
  age:number
}

type C = A | B

const p1:C = {
  name: 'frank'
}
const p2:C = {
  age: 18
}
// p3 處于兩者交集當中,可以理解為p3有name屬性,所以是屬于A類型的。
const p3:C = {
  name:'frank',
  age:18
}
  • 注意:


    image.png
  • 針對聯合類型,有時需要進行類型收窄才能繼續
  1. typeof a === 'xxx':只能判斷基本類型以及function
  2. arr instanceof Array:不能判斷基本類型,以及TS獨有的類型
  3. name in p:判斷某個key是不是在對象里,只適用于部分普通對象
  4. is:類型謂詞,可以作為通用方法,必須是普通函數,不能是箭頭函數,缺點是比較麻煩
type Rect = {
  width: number
  height: number
}
type Circle = {
  center: [number,number]
  radius: number
}

// 如果是 boolean 的話,下面a類型還是 Rect | Circle
function isRect(x:Rect | Circle):boolean{
  return 'width' in x && 'heght' in x
}

// 如果是 is 的話,下面a類型就可以推斷出是Rect類型
function isRect(x:Rect | Circle): x is Rect{
  return 'width' in x && 'heght' in x
}

const fn = (a:Rect | Circle)=>{
  if(isRect(a)){
    console.log(a);
  }
}
  1. 可辨別聯合類型:給各個類型加個kind來區分,kind必須是簡單類型,不能是復雜類型。這種方法的目的是讓復雜類型的對比變成簡單類型的對比
type Rect = {
  kind: 'Rect'
  width: number
  height: number
}
type Circle = {
  kind: 'Circle'
  center: [number,number]
  radius: number
}
type Shape = Rect  | Circle 
const fn = (x: Shape ) => {
  if(x.kind === 'Rect'){
    x // Rect
  }else if (x.kind === 'Circle'){
    x // Circle
  }
}
  1. 斷言 as,強制收縮
  • unknown 類型可以被類型收窄成任何類型,相當于是所有類型的聯合類型
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 類型收窄 所謂的類型收窄, 就是當我們定義類型描述為了適應多種嘗試使用,變量可能是多種類型, 此時在處理不同類型數...
    時光如劍閱讀 1,004評論 0 1
  • 本文并不完全遵循原文翻譯,對部分內容自己也做了解釋補充。 Narrowing 試想我們有這樣一個函數,函數名為 p...
    cd93761a1cef閱讀 396評論 0 0
  • type type 關鍵字用來定義一種類型舉個例子 交叉類型 表示將多個類型合并為一個類型,多用在混入 聯合類型 ...
    在幽幽暗暗反反復復中追問閱讀 15,754評論 1 3
  • A | B 是并集的意思,既可以是A也可以是B,也可以是A和B的交集 但是當 type A = string | ...
    RickyWu585閱讀 136評論 0 0
  • TS 文檔是有一章叫高級類型,其實并不是真的“高級”,他實際的意思是將普通的類型用“某種方式”組合起來形成一個“組...
    寫代碼的海怪閱讀 3,356評論 1 5