TypeScript 中的 infer 关键字
创始人
2025-05-31 00:34:43
TypeScript 笔记
TypeScript 中的 infer

jcLee95:https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343
邮箱 :291148484@163.com
本文地址:https://blog.csdn.net/qq_28550263/article/details/129645350

目 录

1. infer 关键字解析

  • 1.1 使用条件类型提取类型
  • 1.2 使用 infer 关键字表达提取

2. 来源于 lib.es5.d.ts 的例子


1. infer 关键字解析

1.1 使用条件类型提取类型

使用 条件类型 来应用约束然后 提取 出类型,是一种非常常见的操作。比如:

type Flatten = T extends any[] ? T[number] : T;

这里我们定义了一个类型工具 Flatten,你可以理解为一个接受类型作为参数并返回一个类型的函数,其中尖括号中的T)就是那个类型函数的参数。

后面相当于类型函数的部分是一个 条件类型表达式,形式看起来有点像 JavaScript 中的条件表达式,事实上你也可以借助其进行理解。其语法格式为:

 SomeType extends OtherType ? TrueType : FalseType;

与 JavaScript 条件表达式以 逻辑真假 为判断依据类似,
在 Typescript 条件类型表达式 中,以 左侧的类型可分配给右侧的类型 为依据。

  • 当左侧的类型 可分配 给右侧的类型时,第一个分支(称作 true 分支)中获得该类型;
  • 反之,你将在后一个分支(称作 false 分支)中获得类型;

在上面的代码 (T extends any[] ? T[number] : T) 中,如果传如的类型 T 可以分配给类型 any[](比如T是一个string[]) ,则返回类型 T[number],否则返回 T 本身。
比如,我们调用该类型工具生成一个新的类型 MyType

type MyType = Flatten1<['a',2]>;  // 2 | "a"

由于类型 ['a',2] 可以分配给 any[](或者说是 any[] 的子类型,两者就像继承关系,所以用extends 关键字) 提取出了其中的类型作为一个新的类型 MyType

1.2 使用 infer 关键字表达提取

Typescript 为我们提供了一种 使用 infer 关键字 从我们在 条件类型的 true 分支中 比较的类型进行推断的方法。

换句话说, infer 关键字用于声明一个动态生成的 类型变量,这个类型变量是用于临时存放被捕获的类型。例如:

type Flatten = T extends Array ? I : T;

这个例子中,要求传入的类型 T 可分配给 Array,我们知道泛型 Array 中的 U 表示约束该数组的成员类型都为 U,但是 却不会再约束 数组的所有成员都为同一个类型 I。这里的区别在于:
在下面这个表达式中:

T extends Array ? I : T;

T 必须是所有成员类型一致的情况下才能分配给 Array
比如数组 [1,2,3] 可分配给 number[],进一步还可分配给 Array 这都是兼容的。但是 [1,'a','b']由于其中成员类型不一样,它不能分配给 Array
然而在下面这个表达式中:

T extends Array ? I : T;

infer I动态生成的一个个新类型 ,因此这看起来就像是在使用 any[],说明不论数组中的值是何种类型,只要是一个数组,就满足 T extends Array,并且满足的同时 infer I 表示被推断出来的 联合类型

2. 来源于 lib.es5.d.ts 的例子

这部分类型工具声明摘抄于 typescript 内置的类型声明模块lib.es5.d.ts。包括:

  • ThisParameterType
  • OmitThisParameter
  • Parameters
  • ReturnType
  • InstanceType
  • Awaited

他们的声明均使用了 infer 关键字

2.1 提取函数类型的“this”参数的类型

type ThisParameterType = 
T extends (this: infer U, ...args: never) => 
any ? U : unknown;

解释:

  • 如果函数类型没有“this”参数,则为“unknown”。

2.2 从函数类型中移除“this”参数

type OmitThisParameter = 
unknown extends ThisParameterType ? T : T extends (...args: infer A) => infer R ? (...args: A) => R : T;

2.3 获取元组中函数类型的参数

type Parameters any> = T extends (...args: infer P) => any ? P : never;

2.4 获取函数类型的返回类型

type ReturnType any> = 
T extends (...args: any) => infer R ? R : any;

2.5 获取构造函数类型的返回类型

type InstanceType any> = 
T extends abstract new (...args: any) => infer R ? R : any;

2.6 递归展开一个类型的"awaited type"

type Awaited =T extends null | undefined ? T : // special case for `null | undefined` when not in `--strictNullChecks` modeT extends object & { then(onfulfilled: infer F, ...args: infer _): any } ? // `await` only unwraps object types with a callable `then`. Non-object types are not unwrappedF extends ((value: infer V, ...args: infer _) => any) ? // 如果`then`的参数是可调用的,则提取第一个参数Awaited : // recursively unwrap the valuenever : // `then`这个参数是不可调用的T; // non-object 或者 non-thenable
  • 递归展开一个类型的"awaited type"。
  • 非 promise 的 “thenables” 应该 resolve never。这模仿了 await 的行为。

相关内容

热门资讯

联动云租一天多少钱(联动云租一... 本篇文章极速百科给大家谈谈联动云租一天多少钱,以及联动云租一天怎么划算对应的知识点,希望对各位有所帮...
飞机托运收费(飞机托运收费多少... 本篇文章极速百科给大家谈谈飞机托运收费,以及飞机托运收费多少钱一公斤对应的知识点,希望对各位有所帮助...
挡泥板(挡泥板是什么意思) 挡... 本篇文章极速百科给大家谈谈挡泥板,以及挡泥板是什么意思对应的知识点,希望对各位有所帮助,不要忘了收藏...
滴滴专车官网(滴滴专车司机网站... 今天给各位分享滴滴专车官网的知识,其中也会对滴滴专车司机网站进行解释,如果能碰巧解决你现在面临的问题...
路特斯跑车(路特斯跑车多少钱一... 今天给各位分享路特斯跑车的知识,其中也会对路特斯跑车多少钱一辆2023款进行解释,如果能碰巧解决你现...
丰田致享新车报价(丰田致享20... 今天给各位分享丰田致享新车报价的知识,其中也会对丰田致享2021款报价进行解释,如果能碰巧解决你现在...
聊城到潍坊的汽车(聊城到潍坊的... 本篇文章极速百科给大家谈谈聊城到潍坊的汽车,以及聊城到潍坊的汽车票价多少对应的知识点,希望对各位有所...
没有身份证怎么买票(没有身份证... 今天给各位分享没有身份证怎么买票的知识,其中也会对没有身份证怎么买票进行解释,如果能碰巧解决你现在面...
2018科目三灯光详细表(20... 本篇文章极速百科给大家谈谈2018科目三灯光详细表,以及2018科目三最新模拟灯光考试20组不重复完...
五菱之光v(五菱之光v和五菱之... 今天给各位分享五菱之光v的知识,其中也会对五菱之光v和五菱之光有什么区别进行解释,如果能碰巧解决你现...
摩托车怠速(摩托车怠速多少转正... 今天给各位分享摩托车怠速的知识,其中也会对摩托车怠速多少转正常进行解释,如果能碰巧解决你现在面临的问...
武汉到西安(武汉到西安火车时刻... 今天给各位分享武汉到西安的知识,其中也会对武汉到西安火车时刻表查询进行解释,如果能碰巧解决你现在面临...
五菱之光v图片(五菱之光v新车... 今天给各位分享五菱之光v图片的知识,其中也会对五菱之光v新车报价进行解释,如果能碰巧解决你现在面临的...
郑州到重庆火车(郑州到重庆火车... 本篇文章极速百科给大家谈谈郑州到重庆火车,以及郑州到重庆火车多少钱一张对应的知识点,希望对各位有所帮...
学生证优惠区间(学生证优惠区间... 今天给各位分享学生证优惠区间的知识,其中也会对学生证优惠区间没有盖章进行解释,如果能碰巧解决你现在面...
武汉到合肥(武汉到合肥多少公里... 今天给各位分享武汉到合肥的知识,其中也会对武汉到合肥多少公里进行解释,如果能碰巧解决你现在面临的问题...
软座座位分布图(k8412软座... 本篇文章极速百科给大家谈谈软座座位分布图,以及k8412软座座位分布图对应的知识点,希望对各位有所帮...
长安逸动dt(长安逸动dt空调... 本篇文章极速百科给大家谈谈长安逸动dt,以及长安逸动dt空调滤芯拆卸教程对应的知识点,希望对各位有所...
西安到达州(西安到达州火车时刻... 本篇文章极速百科给大家谈谈西安到达州,以及西安到达州火车时刻表查询对应的知识点,希望对各位有所帮助,...
野马蝰蛇(野马蝰蛇gt500图... 本篇文章极速百科给大家谈谈野马蝰蛇,以及野马蝰蛇gt500图片对应的知识点,希望对各位有所帮助,不要...
高速obu是什么意思(收费站o... 今天给各位分享高速obu是什么意思的知识,其中也会对收费站obu是什么意思进行解释,如果能碰巧解决你...
西安北站在哪(西安北站在哪进站... 今天给各位分享西安北站在哪的知识,其中也会对西安北站在哪进站进行解释,如果能碰巧解决你现在面临的问题...
汽车搭电一次多少钱(汽车搭电大... 今天给各位分享汽车搭电一次多少钱的知识,其中也会对汽车搭电大概多少钱进行解释,如果能碰巧解决你现在面...
宝马跑车敞篷价格(宝马跑车敞篷... 本篇文章极速百科给大家谈谈宝马跑车敞篷价格,以及宝马跑车敞篷价格图片对应的知识点,希望对各位有所帮助...
cbr650r(cbr650r... 本篇文章极速百科给大家谈谈cbr650r,以及cbr650r座高对应的知识点,希望对各位有所帮助,不...
在哪买机票最便宜(在哪买机票最... 今天给各位分享在哪买机票最便宜的知识,其中也会对在哪买机票最便宜票进行解释,如果能碰巧解决你现在面临...
etc办理点(etc办理点节假... 今天给各位分享etc办理点的知识,其中也会对etc办理点节假日休息吗进行解释,如果能碰巧解决你现在面...
宝马1181报价及图片(宝马1... 今天给各位分享宝马1181报价及图片的知识,其中也会对宝马1181报价及图片及价格进行解释,如果能碰...
限行处罚扣分吗(限行被扣分吗)... 本篇文章极速百科给大家谈谈限行处罚扣分吗,以及限行被扣分吗对应的知识点,希望对各位有所帮助,不要忘了...
车车(车车车念什么) 车车 车... 今天给各位分享车车的知识,其中也会对车车车念什么进行解释,如果能碰巧解决你现在面临的问题,别忘了关注...