使用infer封装通用类型工具【渡一教育】

源自UP主:渡一前端学习空间

02-25 11:39

TypeScript中的infer关键字是实现高级类型操作的核心,它能让你从现有类型中推导出新类型。掌握它,意味着能轻松应对复杂的类型体操,并封装出强大的类型工具。这堂内容将系统讲解其用法与实战场景,助你提升类型编程能力。

使用infer封装通用类型工具【渡一教育】智能速览

  • infer关键字的核心作用是进行类型推导,充分利用TS的推导能力。

  • 可以通过infer轻松提取函数的返回值类型,封装ReturnType工具。

  • 可以捕获函数的特定参数类型,例如获取第一个参数的类型。

  • 能够解析Promise这样的泛型容器,提取其内部包裹的值类型。

  • 结合模式匹配,可以获取数组元素的类型,并能递归处理多维数组。

使用infer封装通用类型工具【渡一教育】精华内容

要深入理解TypeScript的强大之处,就必须掌握类型推导机制。infer关键字正是释放这一能力的关键,它让复杂的类型操作变得直观且可控。

infer核心原理

infer关键字必须在条件类型(extends ? :)中使用,它作为一个类型占位符,告诉TypeScript在匹配成功时进行类型推导,并将结果“捕获”到这个变量中。当类型系统匹配到一个包含infer的结构时,它会尝试推断出infer位置的具体类型,并将其赋予infer后面的变量,之后便可以在条件类型为真的分支中使用这个推断出来的类型。

简单来说,infer就是“待推断类型”的标记。

提取函数返回类型

一个经典的场景是封装一个获取函数返回类型的工具。首先通过条件类型判断传入的T是否为函数类型,如果不是,则返回T本身。

如果是函数,则将其展开为`(…args: any[]) => infer R`的格式。这里`infer R`就标记了返回类型的位置,TypeScript会自动将函数的返回类型推导出来并赋值给R。最终,在为真的分支中返回R即可。这个实现逻辑与TypeScript内置的ReturnType工具类型完全一致。

捕获函数参数类型

提取参数类型的原理与返回类型类似,同样是利用infer在模式匹配中进行捕获。例如,要获取函数的第一个参数类型,可以将函数结构展开为`(infer F, …args: any[]) => any`。

这里的`infer F`标记了第一个参数的类型,TypeScript在匹配时会自动将第一个参数的具体类型(如string、number等)推断出来并赋给变量F,我们便可以在返回结果中使用这个F类型。其他位置的参数也可以通过调整infer的位置来获取。

解析泛型容器类型

infer的能力不止于函数,它能解析任何符合模式匹配的泛型结构。例如,要获取Promise中的值类型,可以这样写:`T extends Promise ? R : T`。这能从`Promise`中推导出string类型。

同样地,获取数组元素类型可以写成:`T extends (infer U)[] ? U : T`,这能从`string[]`或`[string, number]`中推导出元素类型。对于多维数组,可以通过递归调用自身的方式,逐层解构,直到获取到最底层的元素类型。

掌握infer关键字,是进阶TypeScript类型编程的必经之路。它不仅能帮你解决实际开发中的类型难题,更能让你理解并复用开源库中的高级类型技巧。从现在开始,尝试用它来优化你的类型定义吧。

内容由AI生成
1
扫一下,分享更方便,购买更轻松
0评论

当前文章无评论,是时候发表评论了
提示信息

取消
确认
评论举报

最新文章 热门文章