1. 程式人生 > 其它 >typeScript-聯合型別

typeScript-聯合型別

聯合型別

聯合型別表示取值可以取設定多種型別中的一種。

let myFavoriteNum:string|number
myFavoriteNum = 'seven'
myFavoriteNum = 7
myFavoriteNum = true
//  TS2322: Type 'boolean' is not assignable to type 'string | number'.

聯合型別使用|分隔符來分隔每個型別

上面程式碼說明let myFavoriteNum:string|number說明myFavoriteNum可以為string何number型別,但是不能為其他型別

訪問聯合型別的屬性和方法

當TypeScript不確定一個聯合型別的變數到底是那個型別的時候,我們只能訪問此聯合型別的所有型別裡共有的屬性和方法。

function getLength(something:string|number) {
  return something.length
}
// Property 'length' does not exist on type 'string | number'.
  // Property 'length' does not exist on type 'number'.

上述程式碼中,length不屬於string和number的共有屬性,所以會報錯

訪問string和number的共有屬性是沒有問題的

function getLength(something:string|number) {
  return something.toString()
}

聯合型別的變數在被賦值的時候,會根據型別推論的規則來推斷出來一個型別

let myFavoriteNum:string|number
myFavoriteNum = 'seven'
console.log(myFavoriteNum.length)
myFavoriteNum = 7
console.log(myFavoriteNum.length)
 // ERROR in :Property 'length' does not exist on type 'number'.

上例中,第二行的 myFavoriteNumber 被推斷成了 string,訪問它的 length 屬性不會報錯。

而第四行的 myFavoriteNumber 被推斷成了 number,訪問它的 length 屬性時就報錯了。