超实用的一行 TypeScript 工具函数,写代码必备!

boyanx2个月前技术教程11

前言

在日常开发中,我们经常会遇到一些「小需求」:比如要打乱数组、随机生成字符串、延迟一会儿执行代码…… 这些需求看似简单,却总是要「现写一遍」,久而久之就很浪费时间

下面整理了一份 一行就能搞定的 TypeScript 工具函数合集,简单高效、开箱即用 不仅能提升写代码的幸福感,还能帮助积累一份属于自己的utils.ts工具库

数组相关

数组操作几乎是写业务最常见的场景

下面几个一行工具,可以少写很多循环

使用场景:接口返回了重复数据,展示前去个重,当然主要用于非引用数据类型的去重


使用场景:抽奖列表、题库随机出题


使用场景:比如获取聊天记录的最后一条消息


使用场景:二维数组快速拍平,省去多层for循环

字符串相关

字符串处理的场景就更多了,尤其是做表单、展示数据时

使用场景:人名、标题首字母大写,提升展示效果


使用场景:小工具开发,比如生成对称文本


使用场景:生成临时 ID、测试数据


使用场景:表单校验必备,避免 undefined/null 报错

数字与随机

数字的处理场景主要是随机、校验、格式化

使用场景:抽奖编号、随机验证码,可生成范围确认的随机整数


使用场景:接口返回了未知类型时,先判断一下再处理


使用场景:展示金额、统计数据时自动加上逗号分隔

类型判断

类型判断也是一个比较大的使用场景

在开发过程中,为了提高程序健壮性,往往需要判断函数传参的类型,对一些可能的错误进行提示等

使用场景:一些简单的、非引用数据类型判断场景,基本是对typeof的一个封装,丰富代码可读性


在对一些引用类型,如普通对象、集合等,单纯的typeof就无法明确判断类型了

使用场景:判断Js内置对象的明确类型

时间与异步

涉及到定时、延迟、日期展示时,这几个工具很实用

使用场景:接口请求加点延迟,模拟真实环境;轮询场景常用


使用场景:展示日期数据时,快速转成年月日格式,固定格式,适用于单一需求


使用场景:日历控件、日期校验

对象与工具

对象操作往往比较繁琐,用一行函数可以极大简化代码

使用场景:复制表单数据,避免修改原对象


使用场景:只取出要传给接口的关键字段


使用场景:比如对象里有密码字段,传接口时要去掉

总结

这些一行 TypeScript 工具函数,就像是写代码的「小挂件」,虽然看起来很简单,但在实际项目中能反复用到

需要把这些代码保存成一个utils.ts文件,随时import使用



相关文章

《深入理解javascript原型和闭包系列》 知识点整理

深入理解javascript原型和闭包系列对原型和闭包等相关知识的讲解,由浅入深,通俗易懂,每个字都值得细细研究。一、一切都是对象1. typeof操作符输出6种类型:string boolean n...

在交互设计的过程中如何做到为用户节省时间

用户的时间也是宝贵的,我们不能让它白白浪费掉!在每个项目中我们都要问自己两个问题:“我们为用户节省时间了吗? ”、“我们是如何为用户节省时间的?“在社会中什么东西是最宝贵的? 金钱? 地位? 我认为是...

Python/JS/GO/JAVA四语言同步学(第十四章_字符串字母大小写转换)

全网首发!(第十四章)PY/JS/GO/JAVA四语言字符串大小写转换参数宇宙(200例源码/同步学习/避坑指南)知识一锅端|打通任督二脉 多语言逆袭指南 单语言学习是伪命题!真正的高手早用「四语言...

JavaScript数组的简单排序_js 数组排序

JavaScript数组的简单排序前面的博客分两章分别讲解了数组对象的基本属性和方法,以及数组迭代方法的使用。今天我们再来讲一讲数组的排序问题。1.数组的sort()方法说到数组的排序,大家可能第一反...

什么是 ASCII 码?常见的 ASCII 码表(十进制、十六进制、字符对照)

在今天的计算机世界里,我们随时都在与“字符编码”打交道。写代码、发消息、传文件……背后都有一套规则在运作。而这一切的起点,正是 ASCII 码(American Standard Code for I...

工作10年,总结的20个高效开发的JS工具函数

在前端领域摸爬滚打了8年,从一个写 if/else 都心惊胆战的小白,到现在能从容应对各种复杂业务的老兵,我发现,真正拉开开发者之间效率差距的,除了经验和对框架的理解外,还有一个常常被忽略的“秘密武器...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。