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做条件提取了。

戳我查看源码

相关推荐
好_快28 分钟前
Lodash源码阅读-memoizeCapped
前端·javascript·源码阅读
好_快28 分钟前
Lodash源码阅读-toString
前端·javascript·源码阅读
好_快30 分钟前
Lodash源码阅读-memoize
前端·javascript·源码阅读
excel42 分钟前
webpack 核心编译器 十四 节
前端
excel1 小时前
webpack 核心编译器 十三 节
前端
腾讯TNTWeb前端团队8 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰11 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪11 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪11 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy12 小时前
macOS 命令行 原生挂载 webdav 方法
前端