TypeScript 中的类型检查实用函数

news/2024/5/20 1:41:13 标签: ts, 类型检查

TypeScript 中的类型检查实用函数

文章目录

  • TypeScript 中的类型检查实用函数
  • 一、概述
  • 二、代码实现

一、概述

在前端开发中,我们经常需要判断变量的类型以进行相应的操作或处理。TypeScript 提供了基础的类型检查,但有时我们需要更复杂或更灵活的类型检查。这篇博客文章将介绍一组实用函数,用于各种常见的类型检查

二、代码实现

// 禁用一些 ESLint 规则,主要是因为下面使用了 Object.prototype 的方法
// eslint-disable-next-line @typescript-eslint/unbound-method
const { toString } = Object.prototype

// 判断一个值是否为指定类型
export function is(val: unknown, type: string) {
  return toString.call(val) === `[object ${type}]`
}

// 判断一个值是否已定义
export function isDef<T = unknown>(val?: T): val is T {
  return typeof val !== 'undefined'
}

// 判断一个值是否未定义
export function isUnDef<T = unknown>(val?: T): val is T {
  return !isDef(val)
}

// 判断一个值是否是对象
export function isObject(val: any): val is Record<any, any> {
  return val !== null && is(val, 'Object')
}

// 判断一个值是否为空
export function isEmpty<T = unknown>(val: T): val is T {
  if (isArray(val) || isString(val)) return val.length === 0
  if (val instanceof Map || val instanceof Set) return val.size === 0
  if (isObject(val)) return Object.keys(val).length === 0
  return false
}

// 判断一个值是否是日期对象
export function isDate(val: unknown): val is Date {
  return is(val, 'Date')
}

// 判断一个值是否是 null
export function isNull(val: unknown): val is null {
  return val === null
}

// 判断一个值是否是 null 或 undefined
export function isNullOrUnDef(val: unknown): val is null | undefined {
  return isUnDef(val) || isNull(val)
}

// 判断一个值是否是数字
export function isNumber(val: unknown): val is number {
  return is(val, 'Number')
}

// 判断一个值是否是 Promise
export function isPromise<T = any>(val: unknown): val is Promise<T> {
  return is(val, 'Promise') && isObject(val) && isFunction(val.then) && isFunction(val.catch)
}

// 判断一个值是否是字符串
export function isString(val: unknown): val is string {
  return is(val, 'String')
}

// 判断一个值是否是函数
export function isFunction(val: unknown): val is Function {
  return typeof val === 'function'
}

// 判断一个值是否是布尔值
export function isBoolean(val: unknown): val is boolean {
  return is(val, 'Boolean')
}

// 判断一个值是否是正则表达式
export function isRegExp(val: unknown): val is RegExp {
  return is(val, 'RegExp')
}

// 判断一个值是否是数组
export function isArray(val: any): val is Array<any> {
  return !!val && Array.isArray(val)
}

// 判断一个值是否是 Window 对象
export function isWindow(val: any): val is Window {
  return typeof window !== 'undefined' && is(val, 'Window')
}

// 判断一个值是否是 DOM 元素
export function isElement(val: unknown): val is Element {
  return isObject(val) && !!val.tagName
}

// 判断一个值是否是 Map 对象
export function isMap(val: unknown): val is Map<any, any> {
  return is(val, 'Map')
}

// 判断当前环境是否是服务器
export const isServer = typeof window === 'undefined'

// 判断当前环境是否是客户端
export const isClient = !isServer

// 判断一个字符串是否是有效的 URL
export function isUrl(path: string): boolean {
  const reg = /^((https|http|ftp|rtsp|mms):\/\/)(([0-9a-zA-Z_!~*'().&=+$%-]+: )?[0-9a-zA-Z_!~*'().&=+$%-]+@)?(([0-9]{1,3}.){3}[0-9]{1,3}|([0-9a-zA-Z_!~*'()-]+.)*([0-9a-zA-Z][0-9a-zA-Z-]{0,61})?[0-9a-zA-Z].[a-zA-Z]{2,6})(:[0-9]{1,4})?((\/?)|(\/[0-9a-zA-Z_!~*'().;?:@&=+$,%#-]+)+\/?)$/
  return reg.test(path)
}


http://www.niftyadmin.cn/n/4987104.html

相关文章

navicat连接数据库的方法(易懂)

1.首页要先下载Navicat 官网下载即可 2.下载完点击进入 找到左上角的连接 3.点击选择MySQL... 4.点击进入开始连接数据库

xsschallenge靶场练习1-13关

文章目录 第一关第二关第三关第四关第五关第六关第七关第八关第九关第十关第十一关第十二关第十三关 第一关 观察页面 http://192.168.80.139/xsschallenge/level1.php?nametest尝试在name后面输入最近基本的xss语法 <script>alert(1)</script>第二关 查看页面源…

从零学算法(剑指 Offer 36)

123.输入一棵二叉搜索树&#xff0c;将该二叉搜索树转换成一个排序的循环双向链表。要求不能创建任何新的节点&#xff0c;只能调整树中节点指针的指向。 为了让您更好地理解问题&#xff0c;以下面的二叉搜索树为例&#xff1a; 我们希望将这个二叉搜索树转化为双向循环链表。…

Ansible学习笔记12

playbook&#xff1a; playbook&#xff08;剧本&#xff09;&#xff1a;是ansible用于配置、部署和管理被控节点的剧本&#xff0c;用于Ansible操作的编排。 使用的是yaml格式&#xff0c;&#xff08;saltstack、elk、docker、docker-compose、k8s都会使用到yaml格式。&am…

Ansible学习笔记7

user模块&#xff1a; user模块用于管理用户账户和用户属性。 如果是windows要换一个win_user模块。 创建用户&#xff1a;present&#xff1a; [rootlocalhost ~]# ansible group1 -m user -a "nameaaa statepresent" 192.168.17.106 | CHANGED > {"ansi…

element ui-Pagination

页面分为两个表格&#xff0c;当两边的表格数据量大时&#xff0c;分页样式就会受到影响&#xff0c;可以将跳转按钮的个数减少 页面分页代码如下 页面效果

光伏户外遮阳伞

光伏户外伞不但可以独立发电上网&#xff0c;也可以为其他用电设备提供电能&#xff0c;作为光伏凉亭的可移动补充&#xff0c;同时具备照明&#xff0c;扫码充电&#xff0c;智能呼叫服务&#xff0c;手机端点单&#xff0c;以及音响&#xff0c;语音等功能。 光伏户外伞可广…

Viobot定位用于导航

注&#xff1a;此教程以轮式机器人作为一个样例&#xff0c;具体的应用还需要用户自己去做更深入的开发。当然&#xff0c;着并不是唯一的方法&#xff0c;有更好的方法也欢迎大家讲一下自己的思路&#xff0c;有什么说错的地方也欢迎大家批评指正。 路径规划部分我们选用轮式机…