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);
};/*** @description: 首字母转大写*/
export function titleCase(str) {return str.replace(/( |^)[a-z]/g, L => L.toUpperCase())
}/*** @description: 下划转驼峰*/
export function camelCase(str) {return str.replace(/_[a-z]/g, str1 => str1.substr(-1).toUpperCase())
}

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")); // trueconsole.log(is(b, "Number")); // trueconsole.log(is(c, "Boolean")); // true// 是否为函数let d = () => {console.log("你好");};console.log(isFunction(d)); // trueconsole.log(isFunction(a)); // false// 是否已定义console.log(isDef(a)); // true// 是否未定义console.log(isUnDef(d)); // false// 是否为对象let e = { a: 1, b: 2 };console.log(isObject(e)); // trueconsole.log(isObject(a)); // false// 是否为时间let f = new Date();let g = "09:49:56";console.log(isDate(f)); // trueconsole.log(isDate(g)); // false// 是否为数值let h = 123;let i = "123";console.log(isNumber(h)); // trueconsole.log(isNumber(i)); // false// 是否为字符串let k = "11111";console.log(isString(k)); // trueconsole.log(isString(b)); // false// 是否为boolean类型let l = true;console.log(isBoolean(l)); // trueconsole.log(isBoolean(k)); // false// 是否为数组let arr = [1, 2, 3];console.log(isArray(arr)); // trueconsole.log(isArray(l)); // false// 是否客户端console.log(isClient()); // pc端显示true// 是否为 nullconsole.log(isNull(null)); // trueconsole.log(isNull(undefined)); // falseconsole.log(isNull(a)); // false// 是否为 null || undefinedconsole.log(isNullOrUnDef(null)); // trueconsole.log(isNullOrUnDef(undefined)); // trueconsole.log(isNullOrUnDef(a)); // false// 是否为 16 进制颜色console.log(isHexColor("#dddddd")); //trueconsole.log(isHexColor("rgb(0, 0, 0)")); //false
});
</script>

3. 暂时搞定！