TypeScript中infer关键字的具体使用

 更新时间:2025年06月04日 10:45:01   作者:aiguangyuan  
infer 是 TypeScript 中的高级类型关键字,主要用于条件类型中推断类型,本文就来介绍TypeScript中infer关键字的使用,具有一定的参考价值,感兴趣的可以了解一下

infer 是 TypeScript 中的高级类型关键字,主要用于条件类型中推断类型。它允许我们在条件类型的 extends 子句中声明一个类型变量,然后在该条件类型的 true 分支中使用这个推断出的类型。

1. 基本语法

type SomeType<T> = T extends infer U ? U : never;

2. 主要用途

1. 从复杂类型中提取子类型;

2. 实现类型解构;

3. 创建更灵活的工具类型;

3. 常见示例

3.1. 提取函数返回类型

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

function foo(): number {
  return 42;
}

type FooReturn = ReturnType<typeof foo>; // number

3.2. 提取数组/元组元素类型

type ElementType<T> = T extends (infer U)[] ? U : never;

type StrArray = string[];
type StrElement = ElementType<StrArray>; // string

3.3. 提取数组/元组元素类型

type UnpackPromise<T> = T extends Promise<infer U> ? U : T;

type PromiseNumber = Promise<number>;
type NumberType = UnpackPromise<PromiseNumber>; // number

3.4. 提取函数参数类型

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

function bar(a: string, b: number): void {}
type BarParams = Parameters<typeof bar>; // [string, number]

3.5. 提取构造函数实例类型

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

class MyClass {}
type MyInstance = InstanceType<typeof MyClass>; // MyClass

3.6. 实现类型反转(将元组类型顺序反转)

type Reverse<T> = T extends [infer First, ...infer Rest] 
  ? [...Reverse<Rest>, First] 
  : T;

type Original = [1, 2, 3];
type Reversed = Reverse<Original>; // [3, 2, 1]

4. 注意事项

1. infer 只能在条件类型的 extends 子句中使用;

2. 同一类型变量可以在多个位置进行 infer,但必须推断出相同的类型;

3. 如果无法推断出类型,则条件类型会返回 never 或指定的默认类型;

infer 是 TypeScript 类型编程中非常强大的工具,它使得类型操作更加灵活和强大,特别是在创建复杂工具类型时非常有用。

到此这篇关于TypeScript中infer关键字的具体使用的文章就介绍到这了,更多相关TypeScript infer关键字使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 原生js仿浏览器滚动条效果

    原生js仿浏览器滚动条效果

    本文主要介绍了原生js仿浏览器滚动条效果的实例。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • js中bool值的转换及“&&”、“||”、 “!!”详解

    js中bool值的转换及“&&”、“||”、 “!!”详解

    这篇文章主要给大家介绍了关于js中bool值的转换方法以及"&&" 、"||"、 "!!"的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友下面来一起看看吧。
    2017-12-12
  • JavaScript实现移动端短信验证码流程介绍

    JavaScript实现移动端短信验证码流程介绍

    这篇文章主要为大家详细介绍了javascript实现移动端发送短信验证码案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-10-10
  • 新鲜出炉的js tips提示效果

    新鲜出炉的js tips提示效果

    提示不难做,那个三角号样式很难调兼容,死了好多脑细胞预览主窗口提示错位,保存本地测比较好。
    2011-04-04
  • js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问

    js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问

    这篇文章主要介绍了js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问,需要的朋友可以参考下
    2015-09-09
  • JS打印方法的几种方法

    JS打印方法的几种方法

    本文主要介绍了JS打印方法的几种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • laydate时间日历插件使用方法详解

    laydate时间日历插件使用方法详解

    这篇文章主要为大家详细介绍了laydate时间日历插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • js实现精确到毫秒的倒计时效果

    js实现精确到毫秒的倒计时效果

    这篇文章主要为大家详细介绍了js实现精确到毫秒的倒计时效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JS动态加载脚本并执行回调操作

    JS动态加载脚本并执行回调操作

    这篇文章主要为大家详细介绍了JS动态加载脚本并下载完成后执行回调操作,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JS简单实现点击跳转登陆邮箱功能的方法

    JS简单实现点击跳转登陆邮箱功能的方法

    这篇文章主要介绍了JS简单实现点击跳转登陆邮箱功能的方法,涉及js针对hash表的遍历与页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2017-10-10

最新评论