TypeScript類型斷言VS類型守衛(wèi)示例詳解

更新時間：2022年11月14日 10:50:39 作者：何遇er

這篇文章主要為大家介紹了TypeScript類型斷言VS類型守衛(wèi)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

類型斷言

類型斷言有兩種寫法，分別為value as Type和<Type>value，它讓 TypeScript 編譯器將 value 當作 Type 類型。類型斷言是一個編譯時特性，不進行類型轉換，因此不會影響變量在運行時的數據類型。如果某變量是 any 類型，但現在你知道它確切的數據類型，使用類型斷言能讓 IDE 有代碼提示的能力，也能讓 TypeScript 編譯器進行類型檢查。

類型斷言的用法如下：

const age: any = 23.44;
const user: any = {age: 2}
// age 的 原始數據類型是 any ，在這里將它斷言為 number 類型
(age as number).toFixed(0);
(<number>age).toFixed(0);
// 將user斷言為非null和非undefined
user!.age

除非確切的知道變量的數據類型，否則不要使用類型斷言，這是因為類型斷言會讓 TypeScript 編譯器將變量當做指定的類型，而不管它實際的類型，在程序運行時可能有類型錯誤。

類型守衛(wèi)

類型守衛(wèi)的工作是將數據類型收窄，比如，變量 age 的數據類型可能是 string 也可能是 number，現在要將 age 收窄為 string 類型，類型守衛(wèi)能實現它?？傮w而言，有4種方式讓數據類型收窄。

使用 in 關鍵字

如果某變量的數據類型是聯合類型，并且該變量存在一個屬性絕對不會出現在聯合類型的其他成員類型上，那么可以使用 in 關鍵字將類型收窄。用法如下：

function printType(value: User | Student) {
    // grade 只存在 Student 類型上
if ('grade' in value) { 
        // 在 if 塊中，value 的數據類型被收窄為 Student 類型
        console.log('它是 Student 類型',value.name + ':' + value.grade)
    } else {
	// 在 else 塊中，value 的數據類型被收窄為 User 類型
        console.log('它是 User 類型',value.name)
    }
}

使用 instanceof 關鍵字

用 in 關鍵字收窄數據類型有局限性，必須有一個獨特的屬性作為判別符，否則，不能用 in 關鍵字收窄。如果正在處理的變量是類的實例，那么可以用 instanceof 關鍵字收窄數據類型。用法如下：

function printInfo(value: Staff | Student) {
    if (value instanceof Staff) {
        // 在 if 塊中，value 的數據類型被收窄為 Staff 類型
        console.log('它是 Staff 類型')
    } else {
        // 在 else 塊中，value 的數據類型被收窄為 Student 類型
        console.log('它是 Student 類型')
    }
}

使用 typeof 關鍵字

使用 typeof 能得到值的數據類型，如果變量的類型為基本類型，如：string、number 等，使用 typeof 也能將數據類型收窄。用法如下：

function printType(value: string | number) {
    if (typeof value === 'string') {
        // value 的類型被收窄為 string
        console.log('value 是 string 類型')
    } else {
        // value 的類型被收窄為 number
        console.log('value 是 number 類型')
    }
}
// 用對象上某個字段收窄數據類型
//如果 User 類型的 name 字段為 string 類型，Student 類型的 name 字段為 number 類型
function printObjType(obj: User | Student) {
    if (typeof obj.name === 'string') {
        // value 的類型被收窄為 User
    } else {
        // value 的類型被收窄為 Student
    }
}

自定義類型守衛(wèi)

用 in、instanceof 和 typeof 關鍵字收窄數據類型語法很簡單，但都有各自的局限性。如果它們不能當作類型守衛(wèi)，那么能使用 is 關鍵字自定義類型守衛(wèi)，寫法為：parameter is Type，這種寫法被稱為類型謂詞，要將它放在函數返回值的位置。

類型謂詞所在的函數被稱為類型謂詞函數，它的返回值必須為 boolean 類型。類型謂詞中的 Type可以是任意合法的 TypeScript 數據類型，parameter 可以是函數的參數也能是 this 關鍵字。

當類型謂詞中的 parameter 是函數的參數，用法如下：

function predicateStudent(value: Student | User): value is Student {
    return typeof (value as any).garde === 'number'
}
function printObjType(obj: User | Student) {
    if (predicateStudent(obj)) {
        // obj的類型被收窄為 Student
    } else {
        // value 的類型被收窄為 User
    }
}

上述代碼中的 predicateStudent 是類型謂詞函數，如果它返回 true，那么參數的數據類型被收窄為 Student。

當類型謂詞中的 parameter 是 this 關鍵字，這種用法通常出現在類的方法中，用法如下：

abstract class User {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    isStudent(): this is Student {
        return this instanceof Student;
    }
    isStaff(): this is Staff {
        return this instanceof Staff; 
    }
}
class Student extends User{
    grade: number;
    constructor(name: string, grade: number) {
        super(name)
        this.grade = grade
    }
}
class Staff extends User {
    salary: number;
    constructor(name: string, salary: number) {
        super(name)
        this.salary = salary
    }
}
function printObjType(obj: User) {
    if (obj.isStaff()) {
        // obj 的類型被收窄為 Staff
    } else if (obj.isStudent()){
        // obj 的類型被收窄為 Student
    }
}

上述代碼中的 User 是抽象類，不能被實例化，Staff 和 Student 都繼承自 User。實例方法 isStaff 用于將類型收窄為 Staff，實例方法 isStudent 用于將類型收窄為 Student。