TypeScript 中的类型检查实用函数

这篇具有很好参考价值的文章主要介绍了TypeScript 中的类型检查实用函数。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

TypeScript 中的类型检查实用函数

一、概述

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

二、代码实现

// 禁用一些 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)
}

到了这里,关于TypeScript 中的类型检查实用函数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • typeScript中的函数类型

    目录 1.函数声明 2.函数表达式 3.用接口定义函数的形状 4.可选参数 5.参数默认值  6.剩余参数 7.重载 函数是JavaScript应用程序的基础。它帮助你实现抽象层, 模拟类,信息隐藏和模块。在TypeScript里, 虽然已经支持类,命名空间和模块,但函数仍然是主要的定义行为的地方。

    2024年02月03日
    浏览(31)
  • 【TypeScript】TS条件类型(十)

    🐱 个人主页: 不叫猫先生 🙋‍♂️ 作者简介:2022年度博客之星前端领域TOP 2,前端领域优质作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫优质专栏:vue3从入门到精通、TypeScript从入门到实践 📢 资料领取:前端进阶资料以及文中源

    2023年04月11日
    浏览(36)
  • 【TypeScript】TS类型守卫(六)

    🐱个人主页: 不叫猫先生 🙋‍♂️作者简介:前端领域优质创作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫系列专栏:vue3从入门到精通、TypeScript从入门到实践 📝个人签名:不破不立 📢资料领取:前端进阶资料以及文中源码可以

    2024年02月22日
    浏览(35)
  • 【TypeScript】TS类型声明(二)

    🐱个人主页: 不叫猫先生 🙋‍♂️作者简介:前端领域新星创作者、华为云享专家、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫系列专栏:vue3从入门到精通、TypeScript从入门到实践 📝个人签名:不破不立 TypeScript从入门到实践专栏 是博

    2024年01月20日
    浏览(31)
  • TypeScript:为什么JavaScript需要类型检查?

    JavaScript是当今最为流行的编程语言之一。它是一种高级的、解释性的编程语言,用于Web应用程序的开发。然而,JavaScript的灵活性也是它的弱点之一。JavaScript中的变量、函数、类等都是动态类型,这意味着它们的类型可以在运行时发生变化。虽然这种灵活性为JavaScript开发人员

    2024年02月04日
    浏览(45)
  • 【TypeScript】TS类型断言-类型的声明和转换(五)

    🐱个人主页: 不叫猫先生 🙋‍♂️作者简介:前端领域新星创作者、华为云享专家、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫系列专栏:vue3从入门到精通、TypeScript从入门到实践 📝个人签名:不破不立 📢资料领取:前端进阶资料以

    2024年02月22日
    浏览(31)
  • 【TypeScript】TS接口interface类型(三)

    一、前言 TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。这些方法都应该是抽象的,需要由具体的类去实现,然后第三方

    2024年02月14日
    浏览(34)
  • TypeScript基础篇 - TS日常类型 上篇

    目录 TS的常见用法介绍  example01.ts 逃避类型检查:any 思考一下~:不知道类型 类型标注 函数(参数和返回值) 匿名函数 TS如何知道匿名函数的类型? TS是一种标注式语言,不侵入JS的设计 文章内容 基础类型、数组 any/unkown 类型标注 函数 对象类型 联合 别名 接口 断言 字面

    2024年02月16日
    浏览(48)
  • 前端TypeScript学习day01-TS介绍与TS部分常用类型

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 TypeScript 介绍 TypeScript 是什么 TypeScript 为什么要为 JS 添加类型支持?  TypeScript 相比 JS 的优势  TypeScript 初体验  安装编译 TS 的工具包 编译并运行 TS 代码 简化运行 TS

    2024年02月08日
    浏览(27)
  • 前端TypeScript学习day03-TS高级类型

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)            目录 TypeScript 高级类型 class 类 class继承  extends implements  类成员可见性  public  protected  private   readonly 兼容性 类型兼容性 接口兼容性  函数兼容性  TypeScri

    2024年02月08日
    浏览(27)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包