TypeScript类型体操--获取数组的中间元素

大家好,我是苏先生,2024年我的第一愿景就是做一个可行的副业,求大佬带我~~

好文推荐

前言

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

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

提示

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

实现

这个工具类型实现起来还是比较简单的,只需要在数组的首尾放两个指针,并每次向中间各移动一位即可

假设数组是[number,number,number,number,number,number,number],则指针初始位置在0和6的位置

由于指针所表示的元素是即将被抛弃的元素,所以我们可以使用any来表示,也就是下边这样

ts 复制代码
[any,...,any]

至于中间的部分,则使用infer进行提取就行

ts 复制代码
[any,... infer M,...any]

infer推倒出来的剩余部分,重复前边两步就行了,也就是递归

既是递归,就涉及到出口

显然,当数组的成员数为0或1或2时,得到的中间元素始终是数组本身

设工具类型为GetMiddleElement,入参为T且约束为数组类型

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

当其长度

ts 复制代码
T['length']

为0/1/2时,递归结束

ts 复制代码
type GetMiddleElement<T extends any[]> = T['length'] extends 0|1|2 ? T : ...

否则,指针移动,使用infer提取出剩余部分M

ts 复制代码
T extends [any,...infer M,any]

对M继续递归

ts 复制代码
GetMiddleElement<M>

故,完整的代码如下

ts 复制代码
type GetMiddleElement<T extends any[]> = 
  T['length'] extends 0 | 1 | 2?
    T:
    T extends [any,...infer M,any]?
      GetMiddleElement<M>:never

使用示例如下

拓展

思考一下,如果想要得到的是对应的中间元素的下标,应该怎么处理呢?

思考一下,感兴趣的,可以评论区贴出答案哦🥰

下期预告

AppendArgument

  • 功能

为函数追加参数

  • 使用示例
ts 复制代码
type Fn = (a: number, b: string) => number

type case = AppendArgument<Fn, boolean>  
// (a: number, b: string, x: boolean) => number

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

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

相关推荐
这是个栗子3 小时前
TypeScript(三)
前端·javascript·typescript·react
lpfasd1236 小时前
TypeScript + Cloudflare 全家桶部署项目全流程
前端·javascript·typescript
行者-全栈开发7 小时前
腾讯地图 Map Skills 快速入门:从零搭建 AI 智能行程规划应用
人工智能·typescript·腾讯地图·ai agent·mcp 协议·map skills·智能行程规划
梁山好汉(Ls_man)7 小时前
鸿蒙_ArkTS解决Duplicate function implementation错误
开发语言·华为·typescript·harmonyos·鸿蒙
神の愛11 小时前
利用json-to-ts工具进行转换,放置在typeScript.ts文件中
javascript·typescript·json
zhensherlock13 小时前
Protocol Launcher 系列:Agenda 优雅组织你的想法与日程
javascript·macos·ios·typescript·node.js·mac·ipad
We་ct13 小时前
LeetCode 201. 数字范围按位与:位运算高效解题指南
开发语言·前端·javascript·算法·leetcode·typescript
梁山好汉(Ls_man)17 小时前
鸿蒙_关于自定义组件和自定义构建函数的个人理解
开发语言·华为·typescript·harmonyos·鸿蒙
阿珊和她的猫1 天前
TypeScript 中的 `extends` 条件类型:定义与应用
javascript·typescript·状态模式
zero15971 天前
TypeScript 快速实战系列:基础入门|TypeScript 核心语法 1 小时吃透(必备基础)
javascript·typescript·大模型编程语言