vue3 + ts 判断数据类型的各种方法集合

vue3 + ts 判断数据类型的各种方法集合(记录ing…)

1. 直接上代码

  1. 在utils文件夹下新建 `index.ts`

// index.ts


/**
 * @description: 判断是否为某个类型
 */
export function is(val: unknown, type: string) {
  return Object.prototype.toString.call(val) === `[object ${type}]`;
}

/**
 * @description:  判断是否为函数
 */
export function isFunction<T = Function>(val: unknown): val is T {
  return is(val, "Function");
}

/**
 * @description: 判断是否已定义
 */
export const isDef = <T = unknown>(val?: T): val is T => {
  return typeof val !== "undefined";
};

/**
 * @description: 判断是否未定义
 */
export const isUnDef = <T = unknown>(val?: T): val is T => {
  return !isDef(val);
};

/**
 * @description: 判断是否为对象
 */
export const isObject = (val: any): val is Record<any, any> => {
  return val !== null && is(val, "Object");
};

/**
 * @description:  判断是否为时间
 */
export function isDate(val: unknown): val is Date {
  return is(val, "Date");
}

/**
 * @description:  判断是否为数值
 */
export function isNumber(val: unknown): val is number {
  return is(val, "Number");
}

/**
 * @description:  判断是否为字符串
 */
export function isString(val: unknown): val is string {
  return is(val, "String");
}

/**
 * @description:  判断是否为boolean类型
 */
export function isBoolean(val: unknown): val is boolean {
  return is(val, "Boolean");
}

/**
 * @description:  判断是否为数组
 */
export function isArray(val: any): val is Array<any> {
  return val && Array.isArray(val);
}

/**
 * @description: 判断是否客户端
 */
export const isClient = () => {
  return typeof window !== "undefined";
};

/**
 * @description: 判断是否为 null
 */
export function isNull(val: unknown): val is null {
  return val === null;
}

/**
 * @description: 判断是否为 null || undefined
 */
export function isNullOrUnDef(val: unknown): val is null | undefined {
  return isUnDef(val) || isNull(val);
}

/**
 * @description: 判断是否为 16 进制颜色
 */
export const isHexColor = (str: string) => {
  return /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(str);
};

2. 简单使用

<template>
  <div ref="warp" class="warp"></div>
</template>
<script setup lang="ts">
import {
  is,
  isFunction,
  isDef,
  isUnDef,
  isObject,
  isDate,
  isNumber,
  isString,
  isBoolean,
  isArray,
  isClient,
  isNull,
  isNullOrUnDef,
  isHexColor,
} from "@/utils/index";
import { nextTick, onMounted, ref } from "vue";
onMounted(() => {
  // 判断值是否为某个类型
  let a = "111",
    b = 222,
    c = true;
  console.log(is(a, "String")); // true
  console.log(is(b, "Number")); // true
  console.log(is(c, "Boolean")); // true
  
  // 是否为函数
  let d = () => {
    console.log("你好");
  };
  console.log(isFunction(d)); // true
  console.log(isFunction(a)); // false

  // 是否已定义
  console.log(isDef(a)); // true

  // 是否未定义
  console.log(isUnDef(d)); // false

  // 是否为对象
  let e = { a: 1, b: 2 };
  console.log(isObject(e)); // true
  console.log(isObject(a)); // false

  // 是否为时间
  let f = new Date();
  let g = "09:49:56";
  console.log(isDate(f)); // true
  console.log(isDate(g)); // false

  // 是否为数值
  let h = 123;
  let i = "123";
  console.log(isNumber(h)); // true
  console.log(isNumber(i)); // false

  // 是否为字符串
  let k = "11111";
  console.log(isString(k)); // true
  console.log(isString(b)); // false

  // 是否为boolean类型
  let l = true;
  console.log(isBoolean(l)); // true
  console.log(isBoolean(k)); // false

  // 是否为数组
  let arr = [1, 2, 3];
  console.log(isArray(arr)); // true
  console.log(isArray(l)); // false

  // 是否客户端
  console.log(isClient()); // pc端显示true

  // 是否为 null
  console.log(isNull(null)); // true
  console.log(isNull(undefined)); // false
  console.log(isNull(a)); // false

  // 是否为 null || undefined
  console.log(isNullOrUnDef(null)); // true
  console.log(isNullOrUnDef(undefined)); // true
  console.log(isNullOrUnDef(a)); // false

  // 是否为 16 进制颜色
  console.log(isHexColor("#dddddd")); //true
  console.log(isHexColor("rgb(0, 0, 0)")); //false
});
</script>

3. 暂时搞定！