25.【TypeScript 教程】infer 关键字

简介: 25.【TypeScript 教程】infer 关键字

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。



4. 小结

infer 理解起来比较抽象,一定要亲手写一下本节中的例子。借助条件类型的 infer 关键字来推断类型,可以实现一些比如联合类型转交叉类型、联合类型转元组的操作,有兴趣的可以了解一下。

相关文章
|
22天前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
22天前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
24天前
|
JavaScript 前端开发 安全
TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第9天】TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
26天前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
48 0
|
26天前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
26 0
|
3月前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
3月前
|
资源调度 JavaScript 前端开发
TypeScript实战教程(一):表单上传与后端处理
本文是TypeScript实战教程的第一部分,介绍了使用TypeScript进行表单上传和后端处理的完整流程,包括环境配置、前端表单创建、使用TypeScript和Express框架搭建服务端、处理表单数据,并提供了详细的代码示例和运行测试方法。
TypeScript实战教程(一):表单上传与后端处理
|
4月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
75 0
|
5月前
|
JavaScript 前端开发
37.【TypeScript 教程】TSLint 与 ESLint
37.【TypeScript 教程】TSLint 与 ESLint
83 0
|
5月前
|
JavaScript 编译器 IDE
36.【TypeScript 教程】tsconfig.json 配置
36.【TypeScript 教程】tsconfig.json 配置
30 0