这些TypeScript单行函数真好用,开发效率翻倍
在日常开发中,我们经常遇到一些看似简单却总要重复编写的功能:数组去重、随机生成字符串、延迟执行等等。每次都要现写一遍,既浪费时间又容易出错。
我整理了一些实用的TypeScript单行工具函数,每个都能一行代码搞定。这些函数可以直接用到项目中,帮你节省大量开发时间。
数组操作
数组处理是业务开发中最常见的需求。
去掉重复元素
const unique = <T>(arr: T[]) => [...new Set(arr)];这个函数利用Set自动去重的特性,适合处理数字、字符串等基本类型。
// 使用例子
const numbers = [1, 2, 2, 3, 4, 4];
console.log(unique(numbers)); // [1, 2, 3, 4]打乱数组顺序
const shuffle = <T>(arr: T[]) => [...arr].sort(() => Math.random() - 0.5);注意这里先创建数组副本,避免修改原数组。适合抽奖、随机出题等场景。
获取最后一个元素
const last = <T>(arr: T[]) => arr[arr.length - 1];比每次都写 arr[arr.length - 1] 更清晰,比如获取聊天记录的最后一条消息。
扁平化数组
const flat = <T>(arr: T[][]) => ([] as T[]).concat(...arr);将二维数组转成一维数组,比写循环更简洁。
字符串处理
字符串处理在表单验证和数据显示时经常用到。
首字母大写
const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();改进版,确保其余字母小写。适合处理用户名、标题等。
// 使用例子
console.log(capitalize("hello")); // "Hello"
console.log(capitalize("hELLO")); // "Hello"反转字符串
const reverse = (s: string) => [...s].reverse().join("");用展开运算符处理Unicode字符,比直接调用 reverse() 更准确。
生成随机字符串
const randomString = (len = 8) => Math.random().toString(36).slice(2, 2 + len);生成指定长度的随机字符串,适合创建临时ID或测试数据。
检查空字符串
const isEmpty = (s?: string | null) => !s?.trim();使用可选链操作符,安全地处理 undefined 或 null 值。表单验证时很实用。
数字处理
数字的随机生成、验证和格式化。
生成范围内随机整数
const randomInt = (min: number, max: number) =>
Math.floor(Math.random() * (max - min + 1)) + min;包含最小值和最大值,适合抽奖、验证码等场景。
// 使用例子:生成1-100的随机数
console.log(randomInt(1, 100));验证数字
const isNumber = (val: unknown): val is number =>
typeof val === 'number' && !isNaN(val);处理接口返回数据时,先验证类型再使用,避免运行时错误。
千分位格式化
const formatNumber = (n: number) => n.toLocaleString();显示金额、统计数据时自动添加逗号分隔,提升可读性。
类型判断
确保代码健壮性的类型检查工具。
基本类型判断
const isFunction = (val: unknown): val is Function => typeof val === 'function';
const isString = (val: unknown): val is string => typeof val === 'string';
const isNil = (val: unknown): val is null | undefined => val == null;这些函数让类型检查代码更易读,特别是处理未知的接口返回值时。
引用类型判断
const toTypeString = (val: unknown): string => Object.prototype.toString.call(val);
const isArray = Array.isArray;
const isMap = (val: unknown): val is Map<any, any> => toTypeString(val) === '[object Map]';
const isSet = (val: unknown): val is Set<any> => toTypeString(val) === '[object Set]';
const isDate = (val: unknown): val is Date => toTypeString(val) === '[object Date]';
const isRegExp = (val: unknown): val is RegExp => toTypeString(val) === '[object RegExp]';使用 Object.prototype.toString 准确判断内置对象类型。
时间和异步
处理日期、延时等时间相关需求。
延时执行
const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));异步函数中使用,模拟网络延迟或实现轮询。
// 使用例子
async function demo() {
console.log("开始");
await sleep(1000); // 等待1秒
console.log("结束");
}格式化日期
const formatDate = (d = new Date()) => d.toISOString().split("T")[0];快速获取YYYY-MM-DD格式的日期字符串。
判断闰年
const isLeapYear = (year: number) => (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;日历组件或日期验证时使用。
对象操作
简化对象处理的实用工具。
简单深拷贝
const deepClone = <T>(obj: T): T => JSON.parse(JSON.stringify(obj));适合拷贝JSON安全的数据,复制表单数据时很实用。但不能处理函数、循环引用等复杂情况。
选取对象属性
const pick = <T, K extends keyof T>(obj: T, keys: K[]) =>
keys.reduce((res, key) => {
res[key] = obj[key];
return res;
}, {} as Pick<T, K>);从对象中挑选指定属性,比如只提取需要提交给接口的字段。
// 使用例子
const user = { name: "张三", age: 25, password: "123" };
console.log(pick(user, ["name", "age"])); // { name: "张三", age: 25 }排除对象属性
const omit = <T, K extends keyof T>(obj: T, keys: K[]) =>
Object.entries(obj).reduce((res, [key, value]) => {
if (!keys.includes(key as K)) res[key as keyof Omit<T, K>] = value;
return res;
}, {} as Omit<T, K>);排除指定属性,比如移除密码等敏感字段。
其他实用工具
生成随机颜色
const randomColor = () => `#${Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0')}`;生成十六进制颜色值,适合测试或随机主题。
检查空对象
const isEmptyObject = (obj: object) => Object.keys(obj).length === 0;快速判断对象是否为空。
获取URL参数
const getUrlParam = (name: string) => new URLSearchParams(window.location.search).get(name);方便地获取URL查询参数。
使用建议
创建工具文件:把这些函数保存为 utils.ts,在项目中随处引用
按需导入:只导入需要的函数,避免打包体积过大
import { unique, shuffle } from './utils';添加测试:为常用函数编写单元测试,确保可靠性
类型安全:这些函数都包含TypeScript类型提示,使用时能获得更好的开发体验
这些单行函数就像开发中的瑞士军刀,虽然简单但在各种场景下都能派上用场。积累自己的工具库,能让编码工作更加高效顺畅。
建议你根据实际项目需求,把这些函数整理成自己的工具集,在遇到相应场景时直接使用,避免重复造轮子。
本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!