快捷導(dǎo)航

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

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

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

類型斷言

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

類型斷言的用法如下：

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

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

類型守衛(wèi)

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

使用 in 關(guān)鍵字

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

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

使用 instanceof 關(guān)鍵字

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

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

使用 typeof 關(guān)鍵字

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

function printType(value: string | number) {
    if (typeof value === 'string') {
        // value 的類型被收窄為 string
        console.log('value 是 string 類型')
    } else {
        // value 的類型被收窄為 number
        console.log('value 是 number 類型')
    }
}
// 用對象上某個字段收窄數(shù)據(jù)類型
//如果 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 關(guān)鍵字收窄數(shù)據(jù)類型語法很簡單，但都有各自的局限性。如果它們不能當(dāng)作類型守衛(wèi)，那么能使用 is 關(guān)鍵字自定義類型守衛(wèi)，寫法為：parameter is Type，這種寫法被稱為類型謂詞，要將它放在函數(shù)返回值的位置。

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

當(dāng)類型謂詞中的 parameter 是函數(shù)的參數(shù)，用法如下：

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 是類型謂詞函數(shù)，如果它返回 true，那么參數(shù)的數(shù)據(jù)類型被收窄為 Student。

當(dāng)類型謂詞中的 parameter 是 this 關(guān)鍵字，這種用法通常出現(xiàn)在類的方法中，用法如下：

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。

總結(jié)

在項目中，如果某變量有多種數(shù)據(jù)類型，不建議使用類型斷言將它斷言成特定的類型，而是使用類型守衛(wèi)根據(jù)實際情況將類型收窄，然后按不同的類型分別處理。類型守衛(wèi)能讓應(yīng)用程序的數(shù)據(jù)類型更安全，不至于程序在編譯階段不報錯，但在運行階段報錯。

以上就是TypeScript類型斷言VS類型守衛(wèi)示例詳解的詳細(xì)內(nèi)容，更多關(guān)于TypeScript類型斷言類型守衛(wèi)的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: