Ts类型体操详讲 之 extends infer (下)

目录

1、函数

(1)提取参数类型

(2)提取返回值类型

2、构造器

(1)提取构造器返回值

(2)提取构造器参数类型

3、索引类型


本章我们继续上节的内容继续,展示我们对extends infer的其他用法

1、函数

(1)提取参数类型

我们可以通过 extends 和infer去提取参数的类型

首先,我们定义了一个名为 fn 的类型别名,它代表了一个函数类型,

这个函数接受四个参数:name(类型为 string)、b(类型为 number)、c(类型为 boolean)和 d(类型为 object),并且不返回任何值(返回类型为 {},即 void)。

接下来,我们定义了一个名为 ExtractParameters 的泛型类型别名,它使用了条件类型和类型推导来提取函数的参数类型:

这里的关键是 infer Args。在条件类型中,infer 关键字允许我们为类型变量创建一个新的名字,并从上下文中推断其类型。

  • 如果 fn 是一个函数类型,并且它的参数被解构为 ...args,那么 Args 将会被推断为这些参数的类型。

  • 如果 fn 不是一个函数类型,那么 Args 将永远不会被推断,因此该类型将简化为 never。

戳我查看源码

(2)提取返回值类型

同样我们也能提取返回值的类型

  • fn extends (...args: any[]) => infer ReturnType ? ReturnType : never 是一个条件类型。条件类型允许我们根据某个条件来选择不同的类型。

  • fn extends (...args: any[]) => infer ReturnType:这里检查 fn 是否可以赋值给一个函数类型,该函数接受任意参数(由 ...args: any[] 表示)并返回一个类型(由 infer ReturnType 表示)。infer 关键字是 Ts 的一个特性,允许我们在条件类型中推断类型。

  • 如果上述条件为真(即 fn 确实是一个函数类型),则 GetFunctionReturnType<fn> 的结果类型就是 ReturnType。

  • 如果上述条件为假(即 fn 不是一个函数类型),则 GetFunctionReturnType<fn> 的结果是 never。never 类型在 Ts 中表示一个永远不存在的值的类型。

戳我查看源码

2、构造器

构造器和函数差不多,唯一的区别就是构造器可以new一个新的实例

比如:构造器可以用interface声明

(1)提取构造器返回值

在这段代码中,我们定义了一个泛型类型参数 T,它约束为一个类构造函数,即可以接受任意参数并返回一个新创建的类实例的类型。

并通过条件提取,检查 T 是否满足前面定义的条件(即是否为一个类构造函数),

如果 T 是一个类构造函数,那么 infer ReturnType 会推断出这个构造函数返回的类型,并赋值给 ReturnType。随后,整个条件类型的结果就是 ReturnType。

如果 T 不是一个类构造函数,那么整个条件类型的结果就是 any。

(2)提取构造器参数类型

  • T extends new (...args: infer Arguments) => any ? Arguments : never 是一个条件类型。它检查 T 是否满足 new (...args: infer Arguments) => any 的形式。
  • 如果满足,那么它会提取出 Arguments(使用 infer 关键字),并返回这个类型。
  • 如果不满足,它会返回 never 类型。

戳我查看源码

3、索引类型

我们可以通过条件提取 去获取到某一条索引的值类型

其实跟上面的都是一个逻辑,相信大家看到这里已经能够熟练使用 extends 配合infer做条件提取了。

戳我查看源码

相关推荐
u01110267532 分钟前
图片处理接口如何统一错误信息 前端提示与后端错误码设计
前端·状态模式
福兮说1 小时前
浏览器里把 iPhone 的 HEIC 转成 JPG:Chrome 解不开、转完大了七成、拍摄时间全丢,六个坑实测
前端·javascript·图像处理·chrome·ios·iphone·heic
libokaifa1 小时前
把语音模型塞进手机:sherpa-onnx 在 Android 上的 ASR / TTS
前端
deli0071 小时前
DLA 枝晶生长实测:5000 个粒子集体停摆之后,分形维数收敛到 1.70
前端
IT_陈寒2 小时前
Redis卡顿的锅,这次真不是大key的错
前端·人工智能·后端
可乐鸡翅yeah_2 小时前
video.js 集成 hls.js 开发 M3U8 播放器,新手高频踩坑
开发语言·前端·javascript·后端·ecmascript·m3u8·音视频在线播放
程序猿追2 小时前
HarmonyOS 6 上做个极简浏览器:Web 组件 + 前进后退 + 加载进度
前端·华为·harmonyos
沐沐师2 小时前
Mybatis 框架教程
前端
wflynn2 小时前
GitHub 今日推荐|ts-rust:把微软 TypeScript-Go 编译器逐行移植成 Rust 实现
rust·typescript·开源·github·compiler·tsc
三天不学习2 小时前
Tailwind CSS 快速入门(2026 版):从 v4 零配置上手,到「该不该用、怎么用好」的选型实战
前端·css·tailwind