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

戳我查看源码

相关推荐
90后的晨仔11 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼11 小时前
JavaWeb_p165部门管理
java·开发语言·前端
90后的晨仔11 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔11 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀11 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
我登哥MVP12 小时前
Ajax 详解
java·前端·ajax·javaweb
非凡ghost12 小时前
Typora(跨平台MarkDown编辑器) v1.12.2 中文绿色版
前端·windows·智能手机·编辑器·软件需求
馨谙12 小时前
/dev/null 是什么,有什么用途?
前端·chrome
JamSlade13 小时前
流式响应 sse 系统全流程 react + fastapi为例子
前端·react.js·fastapi
徐同保13 小时前
react useState ts定义类型
前端·react.js·前端框架