菜鸟-创作你的创作

Typescript中infer关键字的使用小结

好的,我帮你整理一个 TypeScript 中 infer 关键字的使用小结,并附上典型示例,方便快速掌握。


TypeScript infer 关键字小结

infer 是 TypeScript 条件类型中用来 推断类型变量 的关键字,它只能在 extends 子句的条件类型中使用。主要用途是从复杂类型中提取或推导出子类型。


1️⃣ 基本语法

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

解释:


2️⃣ 常见用法示例

(1)提取数组元素类型

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

type A = ElementType<number[]>; // number
type B = ElementType<string>;   // string


(2)提取函数返回值类型

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

type Func = (x: number, y: number) => string;

type R = ReturnType<Func>; // string


(3)提取函数参数类型

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

type Func = (x: number, y: string) => boolean;

type P = Params<Func>; // [number, string]


(4)提取 Promise 内部类型

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

type P1 = UnwrapPromise<Promise<number>>; // number
type P2 = UnwrapPromise<string>;           // string


(5)递归类型推断

可以用 infer 做递归类型提取:

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

type Arr = number[][][]; 
type E = DeepArrayElement<Arr>; // number


3️⃣ 使用小技巧

  1. infer 只能在条件类型中使用type T = infer X; // ❌ 错误,必须在 extends 中
  2. 可搭配 any[] 或函数类型解构
    • 数组:T extends (infer U)[]
    • 函数:T extends (...args: infer P) => any
  3. 可以用于解构对象类型(结合映射类型和条件类型):type GetValueType<T> = T extends { value: infer V } ? V : never; type Obj = { value: string }; type V = GetValueType<Obj>; // string
  4. 可用于高级工具类型组合
    • ReturnType<T>
    • Parameters<T>
    • Awaited<T>(TS 内置从 Promise 解包)

✅ 总结:

退出移动版