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

更新日期: 2025-11-01 阅读: 42 标签: 效率

在日常开发中,我们经常遇到一些看似简单却总要重复编写的功能:数组去重、随机生成字符串、延迟执行等等。每次都要现写一遍,既浪费时间又容易出错。

我整理了一些实用的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://fly63.com/article/detial/13111

jQuery 效率提升建议

jQuery简洁通用的方法集把编码者从繁重的工作中解脱出来,也拉低了进入javascript的门槛,初学者对浏览器兼容性一无所知的情况下,几行代码就可以写出超炫的特效。

7大笔记应用,让你的代码效率翻7倍

编程容易产生挫折,即使作为一种业余爱好也可能是这样。建立一个网页,手机APP或桌面应用都是个很大的工程,好的记笔记技能是让这个工程井然有序的关键,也是克服压力、绝望和倦怠的好方法。

html5前端开发工程师_如何提高前端开发效率

不知大家有没类似这样的经历:一天忙到晚,一会被PM叫去确认需求,一会被设计拉去确认UI是否能实现,一会又被测试叫去确认bug,然后貌似做了很多事,但好像工作进度也没什么进展。然后,只能晚上加班,在夜深人静时还得敲代码,苦逼

使用这些 CSS 属性选择器来提高前端开发效率!

属性选择器非常神奇。它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题。但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用。在本文中,我们将讨论它们是如何运行的,并给出一些如何使用它们的想法。

提高远程工作效率的工具

近年来,远程工作愈来愈流行。远程工作能够帮助雇主能够降低运营成本,同时员工有机会实现工作与生活之间的平衡并避免通勤。下面我们就为大家推荐13个有用的工具

你是一直认为MySQL count(1) 比 count(*) 效率高么?

MySQL count(1) 真的比 count(*) 快么? 反正同事们都是这么说的,我也姑且觉得对吧,那么没有自己研究一下究竟?如果我告诉你他们一样,你信么?

提高开发效率的 Vue 技巧

vue 提供了组件功能,组件又可以分为全局组件和非全局组件。区别是全局组件你可以直接在 .vue 文件中直接使用自定义的 html 即可。非全局组件必须在 Vue 的对象中定义 components 引入这个组件

有哪些可以提升编程效率的技巧和方法?

传说程序员打字速度要快,很多人仍然会以这样一个标准来片面判断技术水平.拜托,你是一个程序员,不是一个打字员,打字快可以代表一些,但也并不代表什么.互联网行业还在纠结打字速度的,不是外行,就是一个没有独立思考的人.

推荐几款能提升代码效率的笔记应用

编程容易产生挫折,即使作为一种业余爱好也可能是这样。建立一个网页,手机APP或桌面应用都是个很大的工程,好的记笔记技能是让这个工程井然有序的关键,也是克服压力、绝望和倦怠的好方法

PHP开发提高效率技巧

因为代码对于性能的优化还是有实际性的价值的,并不是冰山哪一张,代码的编写实际对性能就起到了很大占比,就比如:一个常用common类,如果每一次使用都实例化那么这个类在内存中就会用很多个实例

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!