前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >TypeScript类型守卫

TypeScript类型守卫

原创
作者头像
coldPlayer
发布2023-11-20 13:59:46
2550
发布2023-11-20 13:59:46
举报

类型守卫

在前几篇介绍了断言,在使用断言时我们已经确定了变量的类型,确定该类型时一定存在(否则则会欺骗编译,运行时报错),那么为什么还要类型守卫呢?因为类型断言还是需要借助类型守卫的,类型守卫主要是用来判断未知类型是不是所需要的类型

类型守卫主要包括四种方式:

  • in
  • typeof
  • instanceof
  • 自定义类型

1、in- 定义属性场景下内容的确认

先写两个接口Teacher、Student,然后将这两个接口进行联合声明,使用in来判断属性是否在传递的参数中,然后分别作输出。

缺点用 in 关键字缩小数据类型必须有一个独特的属性作为判别标准,否则不能用 in 关键字

代码语言:javascript
复制
interface Teacher{
   name:string;
   courses:string;
}
interface Student{
   name:string;
   study:string;
}
type Class = Teacher | Student;
function getInfo(val:Class){
   //此时val类型缩小为Teacher类型
   if('courses' in val){
        console.log(val.courses)
   }
   //此时val类型缩小为Student类型
   if('study' in val){
        console.log(val.study)
   }
}
getInfo({ name: 'student', study: "Philosophy" });
//打印结果为Philosophy,因为传参中含有study属性,所以走了第二个判断

2、typeof-类型分类场景下的身份确认

为什么用typeof做类型守卫呢?因为typeof能判断JS基本数据类型。typeof只能识别以下类型:

  • Boolean
  • String
  • Undefined
  • Function
  • Number
  • Bigint
  • Symbol

写法typeof a,a是变量(基本数据类型)

奇怪为什么typeof不能识别null呢?

代码语言:javascript
复制
let a= null
typeof a;//object
在这里插入图片描述
在这里插入图片描述

null是一个只有一个值的特殊类型,表示一个空对象引用,可以用来清空对象,它是object类型是历史遗留下来的问题,曾提议改为null类型,被拒绝了。

typeof识别其他的类型比如数组,正则等都是object类型

代码语言:javascript
复制
let a =[1]
typeof a;//Object
var reg = RegExp("a","i");
typeof reg//reg

typeof 怎么起到守卫的作用呢,通过typeof判断变量类型然后执行相应的逻辑,具体如下:

代码语言:javascript
复制
function class(name: string, score: string | number) {
    //识别到sore为number类型
    if (typeof score === "number") {
        return "teacher:" + name + ":" + score;
    }
     //识别到sore为string类型
    if (typeof score === "string") {
        return "student:" + name + ":" + score;
    }
}

上面案例的传参都会基本类型,当传一个对象时候,我们也可以用对象中的属性来进行判断,比如:

代码语言:javascript
复制
interface A{
   a:string;
}
interface B{
   a:number;
}
type Class = A | B;
function getInfo(val:Class){
  //判断val的属性a的类型为number类型
   if(typeof val.a === "number"){
        console.log('B:'+ val.a)
   }
   //判断val的属性a的类型为string类型
   if(typeof val.a === "string"){
         console.log('A' + val.a)
   }
}

3、instanceof-类型分类场景下的身份确认

为什么用instanceof呢?因为typeof有局限性,引用类型比如数组,正则等无法精确识别是哪一个种型,instanceof能够识别变量(比如实例对象)是否属于这个类。instanceof不能检测原始值类型的值,但是原始值对应的对象格式实例则可以检测。具体instanceof是怎么做类型守卫的呢?

  • 写法a instanceof b,a是参数,b是一般都是接口类型。interface Teacher{ name:string; courses:string; } interface Student{ name:string; study:string; } type Class = Teacher | Student; function getInfo(val:Class){ //判断val的类型是否是定义的接口Teacher类型 if(val instanceof Teacher){ console.log('teacher:'+ val.courses) } //判断val的类型是否是定义的接口Student类型 if(val instanceof Student){ console.log('student' + val.study) } }

4、自定义类型

TS中有一个关键字is可以判断变量是否属于某种类型。

  • 写法a is b,意思是a是b类型,a是函数参数,也可以是this关键字,this关键字一般用在类中判断,b可以是接口类型,b也可以是numberstring等其他合法的TS类型。这种写法称作类型谓词,使用类型谓词的函数称为类型谓词函数,该函数的返回值必须的boolean类型。
  • 使用:先定义一个变量,该变量表示是否是某种类型,比如以下定义了isTeacher,代表了参数clsTeacher类型,然后用这个变量来判断。

(1)函数参数形式

函数中的参数类型为多个类型,通过is关键字自定义类型,将函数参数精确到某种类型,然后再执行相应的逻辑。

代码语言:javascript
复制
interface Teacher{
   name:string;
   courses:string;
}
interface Student{
   name:string;
   study:string;
}
const isTeacher = function (cls: Teacher | Student): cls is Teacher {
    return 'courses' in cls;
}
const getName = (cls: Teacher | Student) => {
    if(isTeacher(cls)) {
        return cls.courses;
    }
}

(2)this形式

下面代码中的 User 是抽象类,不能被实例化,Staff 和 Student 都继承自 User。实例方法 isStaff 用于将类型收窄为 Staff,实例方法 isStudent 用于将类型收窄为 Student

代码语言:javascript
复制
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{
    study: string;
    constructor(name: string, study: string) {
        super(name)
        this.study = study
    }
}

class Staff extends User {
    workingYears: number;
    constructor(name: string, workingYears: number) {
        super(name)
        this.workingYears = workingYears
    }
}

function judgeClassType(obj: User) {
    if (obj.isStaff()) {
        // obj的类型被缩小为 Staff
    } else if (obj.isStudent()){
        // obj 的类型被缩小为 Student
    }
}

我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 类型守卫
    • 1、in- 定义属性场景下内容的确认
      • 2、typeof-类型分类场景下的身份确认
        • 3、instanceof-类型分类场景下的身份确认
          • 4、自定义类型
            • (1)函数参数形式
            • (2)this形式
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档