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> 的结果是 nevernever 类型在 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做条件提取了。

戳我查看源码

相关推荐
吃杠碰小鸡4 分钟前
commitlint校验git提交信息
前端
Jacky(易小天)17 分钟前
MongoDB比较查询操作符中英对照表及实例详解
数据库·mongodb·typescript·比较操作符
虾球xz35 分钟前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇40 分钟前
HTML常用表格与标签
前端·html
疯狂的沙粒44 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员1 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐1 小时前
前端图像处理(一)
前端
程序猿阿伟1 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒1 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪1 小时前
AJAX的基本使用
前端·javascript·ajax