来了解一下TS中的infer吧

来了解一下TS中的infer吧

在 TypeScript 中,infer 类型是一个非常强大且有用的特性。

infer 通常用于条件类型中,它允许我们在类型操作中进行类型推断。简单来说,就是能够从已有的类型中提取出一部分类型信息。

基本用法

infer 关键字只能在条件类型中使用,通常与泛型extends 关键字一起使用。它的语法如下:

typescript 复制代码
type Case<T> = T extends infer U ? U : never;

这段代码定义了一个类型别名Case<T>,它尝试推断泛型参数T的实际类型。如果T可以被推断为某个具体的类型U,那么Case<T>的类型就是U;如果T不能被推断为任何类型(比如T是一个具体值而不是类型),那么Case<T>的类型就是never
注意这个类型变量(infer U)只能在true的分支中使用

懵逼了千万别怕,看了下面两个例子就秒懂了~

举个例子

案例一:

结合上述代码

type Case = T extends infer U ? U : never;

如果你使用Case<number>,那么T会被推断为number,所以Case<number>的类型就是number

解释

  1. T extends infer U ? U : never是一个条件类型表达式。条件类型允许你基于一个类型检查的结果来选择两种类型之一。
  2. infer U是类型推断的关键字。它用于在条件类型中声明一个待推断的类型变量U。这里的infer关键字告诉TypeScript尝试推断T的实际类型,并将其赋值给U。 查的结果来选择返回的类型。如果T可以被推断为某个类型U,则返回U;否则,返回never类型。

现在,让我们具体看看Case<number>的情况:

  • 当你使用Case<number>时,T被指定为number
  • 条件类型T extends infer U检查number是否可以被推断为某个类型U。在这个情况下,number本身就是一个类型,所以它可以被推断。
  • 由于number可以被推断,因此U被推断为number

所以可以看到实际上T extends infer U 中,U的类型是依靠T的类型获取的

因此如果你使用Case<42>,由于42是一个具体的值而不是类型,所以Case<42>的类型就是never

案例二:

问题 :给定类型别名type,要求获取HD类型中属性的类型?

ini 复制代码
type HD = { name: string, age: number }
type valueType = AttrType<HD>

也就是其中nameage的类型:string ,number

利用infer X定义变量

r 复制代码
type AttrType<T> = T extends { name: infer M, age: infer M } ? M : T;

这里infer M会尝试推断泛型参数T的实际类型来推断M变量的类型

  • 条件类型 T extends { name: infer M, age: infer M } ? M : T; 检查 T 是否可以被赋值给一个对象,该对象有两个属性 nameage,它们都推断为同一个类型 M
  • 如果 T 满足这个条件(即 T 是一个对象,且 nameage 属性的类型相同),那么 AttrType<T> 将被推断为该共同的类型 M
  • 如果 T 不满足这个条件(即 T 不是一个对象,或者 nameage 属性的类型不相同),那么 AttrType<T> 将返回 T 本身。

小结

再用白话小结一下:

  1. infer X 就相当于声明了一个变量,这个变量X随后可以使用,甚至和我们常见的for循环中的let i很像,只是一个具体值未知形式的表示而已。

  2. 而这里X值的具体值又需要结合extend T,通过T的类型获取。

相关推荐
Hyyy18 分钟前
很多Desktop都在上的Computer Use是什么
前端·llm
慢功夫19 分钟前
开篇:VS Code 为什么不是一个普通 React App
前端·visual studio code
你挚爱的强哥30 分钟前
Vue2 实现 1.5s 十连击监听(连续点击若干次),封装通用可复用点击检测工具,不用 data!Vue 封装通用连击监听方法,支持自定义时长与点击次数
前端·javascript·vue.js
huashengzsj1 小时前
Shopify个人建站如何搭建独立站:从零开始的完整指南
前端·网络·人工智能
程序猿小泓1 小时前
从 Claude Code 学 Agent Harness:一个前端工程师的 AI Agent 学习笔记
前端·人工智能·学习
柒和远方2 小时前
从审计日志到可下载证据包:事务型 Outbox、租约 fencing 与保留水位
前端·后端·架构
minglie12 小时前
npm ali-oss库依赖冲突
前端·npm
CryptoPP3 小时前
BSE股票K线数据接入实战:从接口调用到前端图表展示
大数据·前端·网络·人工智能·websocket·网络协议
Random_index4 小时前
#Vue3篇: Vue 项目发版后如何提示用户刷新?基于 package.json 版本号的前端更新检测方案
前端·vue.js·json
没落英雄5 小时前
5. 从零开始搭建一个 AI Agent —— 人机协作与中断恢复
前端·人工智能·架构