这些TypeScript单行函数真好用,开发效率翻倍

摘要:在日常开发中,我们经常遇到一些看似简单却总要重复编写的功能:数组去重、随机生成字符串、延迟执行等等。每次都要现写一遍,既浪费时间又容易出错。我整理了一些实用的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查询参数。


使用建议

  1. 创建工具文件:把这些函数保存为 utils.ts,在项目中随处引用

  2. 按需导入:只导入需要的函数,避免打包体积过大

    import { unique, shuffle } from './utils';
  3. 添加测试:为常用函数编写单元测试,确保可靠性

  4. 类型安全:这些函数都包含TypeScript类型提示,使用时能获得更好的开发体验

这些单行函数就像开发中的瑞士军刀,虽然简单但在各种场景下都能派上用场。积累自己的工具库,能让编码工作更加高效顺畅。

建议你根据实际项目需求,把这些函数整理成自己的工具集,在遇到相应场景时直接使用,避免重复造轮子。

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_13111