TypeScript类型断言与类型守卫：原理、用法及最佳实践

作者：小括号时间：2026-10-25 23:03:30浏览：380

本文详解TypeScript中类型断言与类型守卫的区别。类型断言仅改变编译期视图，不执行运行时转换；类型守卫则通过in、instanceof、typeof及自定义is谓词实现运行时类型收窄。文章对比了两种机制的适用场景，强调在变量存在多种类型时，优先使用类型守卫以确保运行时的类型安全。

类型断言

TypeScript提供了两种类型断言的语法形式，分别是value as Type和<Type>value。类型断言的作用是指引编译器将变量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编译器会强制将变量视为指定类型，忽略其实际类型，这可能导致程序在运行时出现类型错误。

类型守卫

类型守卫的核心功能是将变量的数据类型范围缩小（收窄）。例如，当变量age的数据类型可能是string或number时，类型守卫可以将其精确限定为string类型。总体而言，TypeScript提供了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
    }
}

自定义类型守卫

虽然in、instanceof和typeof关键字语法简单，但各自存在局限性。当上述关键字无法作为类型守卫时，可以使用is关键字来自定义类型守卫。其语法格式为：parameter is Type，这种写法被称为类型谓词（Type Predicate），需放置在函数的返回值位置。

包含类型谓词的函数称为类型谓词函数，其返回值必须为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。