当前位置: 代码网 > it编程>编程语言>Javascript > typescript is类型谓词

typescript is类型谓词

2024年08月06日 Javascript 我要评论
但是不同的是typeof、instanceof、in关键字在js中已经是存在的,在ts中使用它们,进行类型收缩时,比较无感知(因为符合js中的用法)会发现,ts不能够根据isUndef函数进行类型收缩,这时候可以使用is类型谓词告诉ts只有当参数为null或者undefined时,返回值才为true,从而进行类型收缩。第一个 if判断中使用typeof判断strs,如果通过的话,那么strs变量可能是数组或者null(ts提示操作也是这样的)如果判断的地方多了,可以抽取出一个公共函数来判断。

一、类型谓词是干嘛的?

类型谓词可以有效的帮助我们根据条件缩小类型范围(narrowing)。它与 typeof、instanceof、in类似。但是不同的是typeof、instanceof、in关键字在js中已经是存在的,在ts中使用它们,进行类型收缩时,比较无感知(因为符合js中的用法)

比如

function printall(strs: string | string[] | null) {
  if (typeof strs === "object") {
    for (const s of strs) {
'strs' is possibly 'null'.
      console.log(s);
    }
  } else if (typeof strs === "string") {
    console.log(strs);
  } else {
    // do nothing
  }
}

解释:

  • 第一个 if判断中使用typeof判断strs,如果通过的话,那么strs变量可能是数组或者null(ts提示操作也是这样的)
    在这里插入图片描述

  • 第二次if时使用typeof判断,可知现在的strs类型应该是‘string’类型 -在这里插入图片描述

  • 最后的else,因为给定strs的类型已经收缩完毕,所以在else分支中为never
    在这里插入图片描述

二、类型谓词的格式

类型谓词采用parametername is type格式,其中parametername 必须是当前函数中的参数名称

例如

function isfish(pet: fish | bird): pet is fish { // 其中 pet is fish 就是is类型谓词
  return (pet as fish).swim !== undefined;
}

三、应用场景

function runner(params: null | undefined | string): void {
   if (params == null) {
    console.log(params);
   } else {
    console.log(params);
   }
}

如上代码。在平时写代码时,会进行判断参数是否为null。如果判断的地方多了,可以抽取出一个公共函数来判断。如下

/**
 * @description isundef 是否定义
 * @param val
 * @returns { boolean }
 */
export default  function isundef (val: any): boolean {
  return val == null;
}

并在需要用到的地方导入使用。如下

import isundef from './isundef';

function runner(params: null | undefined | string): void {
   if (isundef(params)) {
    console.log(params);
   } else {
    console.log(params);
   }
}

会发现,ts不能够根据isundef函数进行类型收缩,这时候可以使用is类型谓词告诉ts只有当参数为null或者undefined时,返回值才为true,从而进行类型收缩。
在这里插入图片描述```
使用is谓词修改isundef函数,进而ts正确收缩

/**
 * @description isundef 是否定义
 * @param val
 * @returns { boolean }
 */
export default  function isundef (val: any): val is null | undefined {
  return val == null;
}

在这里插入图片描述

如果问题欢迎指出

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com