TypeScript类型体操--Uniq

大家好,我是苏先生,一名热爱钻研、乐于分享的前端工程师,跟大家分享一句我很喜欢的话:人活着,其实就是一种心态,你若觉得快乐,幸福便无处不在

github与好文

前言

前边九篇文章我们一共实现了37 个工具类型,按照本专栏的规划,还差62个...

本节我们继续学习一个新的工具类型

提示

对于语法层面的知识点本系列(类型体操开头的标题)不会展开说明哈,可以自行搜索学习其他大佬的优质文章或者等我后续更新补充

版本一

首先创建一个工具类型,它的名称是Uniq。并且,它接收一个类型为数组的泛型参数T

ts 复制代码
type Uniq<T extends any[]>

由于去重的隐式条件是一一比较,所以我们要提取出数组中的成员,这是参与比较的前提。为了达到这个目的,又需要构建条件类型,因为这是使用infer提取成员的充要条件

ts 复制代码
T extends [infer F,...infer R] ? 'A' : 'B'

现在得到了成员F,下一步就是找它的比较量,由于数组T的成员数是动态且未知的,所以要有一种类似JavaScript中的every的遍历方式依次取出每一个成员,这样就能与F比较来确定是否是重复元素了。这在TypeScript中可以通过extends加索引的方式来实现

ts 复制代码
F extends R[number]

此时,如果条件成立,则说明F重复,只需要将其丢掉后对剩余的R进行递归即可

ts 复制代码
Uniq<R>

相应的,若为false,则保留F,并继续对R递归去重即可

ts 复制代码
[F,...Uniq<R>]

故,使用示例如下

版本二

版本一很好的完成了需求,但有一点小小的问题,那就是,Uniq执行过后的结果的元素顺序发生了变化。如下,1在原数组中的位置应该在5的前边

所以,我们换种思路,通过声明变量的方式来做。如下,笔者新增了泛型参数P,它默认为空数组。并且它表示不重复的成员集合

ts 复制代码
type Uniq<T extends any[],P extends any[] = []>

接着,还是去取数组成员F

ts 复制代码
[infer F,...infer R]

不过这次,我们不再从R中查找了,而是从P中对比

ts 复制代码
F extends P[number]

若比较结果为false,则表示F尚未出现重复,此时保留F,并推入P

ts 复制代码
[F,...Uniq<R,[...P,F]>]

则在下一次递归中,当条件成立时,说明出现重复,此时只需要将F剔除即可。另外,比较重要的是,此时需要做一次P的重置操作,因为当原成员出现次数超过两次时,我们需要保留一个用于下一次的对比

ts 复制代码
Uniq<R,Uniq<P>>

故,使用示例如下

下期预告

FindOnceAppearAtArray

  • 功能

找出数组中只出现过一次的成员

  • 使用示例
ts 复制代码
type case1 = FindOnceAppearAtArray<[1,2,2,3,3,4,5,6,6,6]> // [1,4,5]

如果本文对您有用,希望能得到您的点赞和收藏

订阅专栏,每周更新1-2篇类型体操,等你哟😎

相关推荐
用户938515635076 小时前
TypeScript 高级类型 + CSS 三列布局:从类型体操到样式工程的进阶之路
css·面试·typescript
moMo10 小时前
深入 NestJS:从工厂模式到装饰器模式的架构之美
typescript·nestjs
烬羽17 小时前
NestJS 依赖注入:Controller 里那个没有 new 的 service,到底从哪来的?
设计模式·typescript·nestjs
渣波18 小时前
NestJS 企业级后端架构实战:从核心代码到工程化思维的深度重构
前端·typescript·nestjs
嘟嘟071718 小时前
NestJS 入门:从 NestFactory 入口到 Module/Controller/Service 模块化结构一次讲清
typescript·node.js·nestjs
用户938515635071 天前
实战 Todo CRUD —— 从路由到异常,手写一个完整模块
后端·typescript·nestjs
不知疲倦的老鸟1 天前
Next.js 15 多语言站点的 6 个坑:从 query string 路由到 URL 路径
typescript·next.js
北墨NoLimit1 天前
鸿蒙线程间通信怎么选:TaskPool、TaskGroup、LongTask 与 Worker 实战
typescript·harmonyos
Orange_sparkle2 天前
从五个 TypeScript 文件看懂 Coding Agent:一次 nano-pi 学习复盘
javascript·学习·typescript
深海鱼在掘金2 天前
深入浅出RAG——第7章:基础篇实战:文档问答机器人
人工智能·typescript·命令行