聯(lián)合類型：通俗點說就是一個變量可能有多種類型。

比如：一個人（person）有可能是老師（teacher），也有可能是服務(wù)員（waiter），但是不可能同時是老師和服務(wù)員。

interface teacher{
    type:string;
    say:()=>{};
}
 
interface waiter{
    type:string;
    run:()=>{};
}
// 調(diào)用
function person(animal: waiter | teacher) {}

animal就是一個聯(lián)合類型，但是現(xiàn)在直接調(diào)用animal中的方法的時候會報錯：

function person2(animal: Waiter | Teacher) {
  animal.say();
}

因為，其二種接口中的方法即屬性可能是不同的。

這個時候，我們就需要傳說中的類型保護(hù)

一：類型保護(hù)-類型斷言

類型斷言就是通過斷言的方式確定傳遞過來的準(zhǔn)確值，比如上面的程序，如果type是teacher，說明他就是老師，這時候就可以通過斷言animal as Teacher,然后直接調(diào)用say方法,程序就不再報錯了。

同樣如果type是waiter，說明就是服務(wù)員，這時候調(diào)用run()方法，就不會報錯了。

這就是通過斷言的方式進(jìn)行類型保護(hù)。也是最常見的一種類型保護(hù)形式。

interface teacher{
    type:string;
    say:()=>{};
}
 
interface waiter{
    type:string;
    run:()=>{};
}
 
/**
 * 類型斷言
 * @param animal 
 */
function person1(animal: waiter | teacher) 
{
    // 通過接口中的類型判斷
    if (animal.type == 'teacher') 
    {
        (animal as teacher).say();
    }
    else
    {
        (animal as waiter).run();
    }
}
 

二：類型保護(hù)-in 語法

使用in來判斷接口中是否有當(dāng)前你要調(diào)用的語法。代碼如下：

/**
 * in 語法
 * @param animal 
 */
function person2(animal: waiter | teacher) 
{
    // 通過接口中的類型判斷
    if ("say" in animal) 
    {
        animal.say();
    }
    else
    {
        animal.run();
    }
}

三：類型保護(hù)-typeof語法

先來寫一個新的add方法，方法接收兩個參數(shù)，這兩個參數(shù)可以是數(shù)字number也可以是字符串string,如果我們不做任何的類型保護(hù)，只是相加，這時候就會報錯。代碼如下:

/**
 * typeof 語法
 */
function add(first: string | number,secord:string | number) 
{
    return first + secord; // 這條語句會報錯
}

正確的寫法如下：

/**
 * typeof 語法
 */
function add(first: string | number,secord:string | number) 
{
    if(typeof first === 'string' || typeof secord === 'string')
    {
         return `${first}${secord}`;
    }
    return first + secord; 
}

四：類型保護(hù)-instanceof 語法

比如現(xiàn)在要作類型保護(hù)的是一個對象，這時候就可以使用instanceof語法來作?，F(xiàn)在先寫一個NumberObj的類，代碼如下：

class NumberObj {
  count: number;
}

然后我們再寫一個addObj的方法，這時候傳遞過來的參數(shù)，可以是任意的object,也可以是NumberObj的實例，然后我們返回相加值，當(dāng)然不進(jìn)行類型保護(hù)，這段代碼一定是錯誤的。

function addObj(first: object | NumberObj, second: object | NumberObj) {
  return first.count + second.count;
}

報錯不要緊，直接使用instanceof語法進(jìn)行判斷一下，就可以解決問題。

function addObj(first: object | NumberObj, second: object | NumberObj) {
  if (first instanceof NumberObj && second instanceof NumberObj) {
    return first.count + second.count;
  }
  return 0;
}

另外要說的是，instanceof 只能用在類上。這節(jié)課我大概說了四種類型保護(hù)的方式，每種方式都在不同場景中使用(還有一些不太常用的類型保護(hù)方式)，可能需要自己深刻理解。

有好的建議，請在下方輸入你的評論。

歡迎訪問個人博客
https://guanchao.site