Vue3 vant 源码解析之 utils/ validate.ts 数据类型验证

代码说明

这部分代码是Vue ts版本的 vant 下面的 utils/validate.ts部分的源码解析

是一些基础的校验

基础依赖

import { inBrowser, type Numeric } from './basic';

inBrowser,Numberic

typeof window !=="undefined"//判断是否在浏览器环境中

type Numeric = number|string

定义一个type数据类型是  number或者 string

正式代码

isDef 判断是否定义 ，不是null或者undefined

const isDef = <T>(val: T): val is NonNullable<T> => {
  return val !== null && val !== undefined;
};

isFunction 判断是否是函数

export const isFunction = (val: unknown): val is Function =>
  typeof val === 'function';

unknown 表示 不知道入参的数据类型

is 表示类型判断  使 数据具备is后面类型的属性和方法

isObject 判断是否是对象

export const  isObject = (val:unknown):val is Record<any,any>=>{
  return val !==null&&typeof val ==="object"
}

• 入参类型不确定的时候和使用 unknown+
• Record 用于定义未知数量的 keyType:valueType形式
• 判断数据是否是 对象类型 不仅要用 val === "object",而且不能等于null

isPromise 判断是否是 promise类型

export const isPromise = <T=any>(val:unknown):val is Promise<T>=>{
  return isObject(val)&&isFunction(val.then)&&isFunction(val.catch)
}

isDate 判断是否是日期类型

export const isDate = (val: unknown): val is Date =>
  Object.prototype.toString.call(val) === '[object Date]' &&
  !Number.isNaN((val as Date).getTime());

isMobile 判断是否是手机号

export function isMobile(value: string): boolean {
  value = value.replace(/[^-|\d]/g, '');
  return (
    /^((\+86)|(86))?(1)\d{10}$/.test(value) || /^0[0-9-]{10,13}$/.test(value)
  );
  // 判断是否是手机号
}

isNumeric 判断石佛是number

export const isNumeric = (val: Numeric): val is string =>
  typeof val === 'number' || /^\d+(\.\d+)?$/.test(val);
// 判断石佛是number类型  或者是 数字字符串（包含小数点）

isIOS 判断是否是 ios机型

export const isIOS = (): boolean =>
  inBrowser
    ? /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())
    : false;

判断是否是 ios机型

innBrowser判断石佛在浏览器中

export const inBrowser = typeof window !== 'undefined';

完整代码

import { inBrowser, type Numeric } from './basic';

export const isDef = <T>(val: T): val is NonNullable<T> =>
  val !== undefined && val !== null;
  // NonNullable 参数类型是 null或者 undefined

// eslint-disable-next-line @typescript-eslint/ban-types
export const isFunction = (val: unknown): val is Function =>
  typeof val === 'function';
  // is  ts 可以根据js后面的类型做类型判断    

export const isObject = (val: unknown): val is Record<any, any> =>
  val !== null && typeof val === 'object';
  // unknown 表示数据据类型未知
  // Record 用于定义未知数量的 keyType:valueType形式

export const isPromise = <T = any>(val: unknown): val is Promise<T> =>
  isObject(val) && isFunction(val.then) && isFunction(val.catch);
// unknown表示 数据未知
// val  is Promise 表示类型判断为 Promise  
// 数据是 object类型 并且 then方法和 catch方法都是函数 则为 Promise类型


export const isDate = (val: unknown): val is Date =>
  Object.prototype.toString.call(val) === '[object Date]' &&
  !Number.isNaN((val as Date).getTime());
// 判断是否是日期类型

export function isMobile(value: string): boolean {
  value = value.replace(/[^-|\d]/g, '');
  return (
    /^((\+86)|(86))?(1)\d{10}$/.test(value) || /^0[0-9-]{10,13}$/.test(value)
  );
  // 判断是否是手机号
}

export const isNumeric = (val: Numeric): val is string =>
  typeof val === 'number' || /^\d+(\.\d+)?$/.test(val);
// 判断石佛是number类型  或者是 数字字符串（包含小数点）

export const isIOS = (): boolean =>
  inBrowser
    ? /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())
    : false;
  // 判断是否是 ios机型
// innBrowser判断石佛在浏览器中
  // export const inBrowser = typeof window !== 'undefined';