TypeScript infer 关键字
本节要介绍的 infer 关键字有些难理解，我们来通过一个类比来帮助理解。
语句 let num 中，通过 let 来声明了一个变量，那怎样声明一个不确定的类型变量呢？ 答案是使用 infer 关键字，infer R 就是声明了一个类型变量 R。
1. 解释
在条件类型表达式中，可以在 extends 条件语句中使用 infer 关键字来声明一个待推断的类型变量。
2. 通过 ReturnType 理解 infer
infer 相对比较难理解，我们先看下 TypeScript 一个内置工具类型 ReturnType 。
-
ReturnType<T>– 获取函数返回值类型。
const add = (x:number, y:number) => x + y
type t = ReturnType<typeof add> // type t = number
代码解释：
通过 ReturnType 可以得到函数 add() 的返回值类型为 number 类型。但要注意不要滥用这个工具类型，应尽量多的手动标注函数返回值类型。
来看一下 ReturnType 的实现源码：
/**
* Obtain the return type of a function type
*/
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any
infer 的作用是让 TypeScript 自己推断，并将推断的结果存储到一个类型变量中，infer 只能用于 extends 语句中。
再来看 ReturnType 的实现：如果 T 满足约束条件 (...args: any) => any，并且能够赋值给 (...args: any) => infer R，则返回类型为 R，否则为 any 类型。
继续看几个例子：
type T0 = ReturnType<() => string> // string
type T1 = ReturnType<(s: string) => void> // void
type T2 = ReturnType<<T>() => T> // unknown
代码解释：
分别可以得到 type T0 = string type T1 = void type T2 = unknown，只要满足约束条件 (...args: any) => any，TypeScript 推断出函数的返回值，并借助 infer 关键字将其储存在类型变量 R 中，那么最终得到返回类型 R。
3. 借助 infer 实现元组转联合类型
借助 infer 可以实现元组转联合类型，如：[string, number] -> string | number
type Flatten<T> = T extends Array<infer U> ? U : never
type T0 = [string, number]
type T1 = Flatten<T0> // string | number
代码解释：
第 1 行，如果泛型参数 T 满足约束条件 Array<infer U>，那么就返回这个类型变量 U。
第 3 行，元组类型在一定条件下，是可以赋值给数组类型，满足条件:
type TypeTuple = [string, number]
type TypeArray = Array<string | number>
type B0 = TypeTuple extends TypeArray ? true : false // true
第 4 行，就可以得到 type T1 = string | number。文章来源：https://www.toymoban.com/news/detail-818343.html
4. 小结
infer 理解起来比较抽象，一定要亲手写一下本节中的例子。借助条件类型的 infer 关键字来推断类型，可以实现一些比如联合类型转交叉类型、联合类型转元组的操作，有兴趣的可以了解一下。文章来源地址https://www.toymoban.com/news/detail-818343.html
到了这里，关于25.【TypeScript 教程】infer 关键字的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术25（HTML5、CSS3、JavaScript ）JavaScript基础消息对话框告警框确认框提示框命名规范1标识符2关键字3保留字注释标识符和变量——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/830038-1.png)
