TS infer

TS infer

先看一段ts源码

/**
 * Obtain the return type of a function type
 */
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

看不懂没事，接下来一步步带你看懂

你知道如何获取 T0 数组类型中元素的类型和 T1 函数类型中的返回值类型么？

type T0 = string[];
type T1 = () => string;

要实现上述的功能，我们可以使用 TypeScript 提供的类型模式匹配技术 —— 条件类型 + infer。条件类型允许我们检测两种类型之间的关系，通过条件类型我们就可以判断两种类型是否相兼容。而 infer 用于声明类型变量，以存储在模式匹配过程中所捕获的类型

type UnpackedArray<T> = T extends (infer U)[] ? U : T
type U0 = UnpackedArray<T0> // string

在以上代码中，T extends (infer U)[] ? U : T 是条件类型的语法，而 extends 子句中的 infer U 引入了一个新的类型变量 U，用于存储被推断的类型。

需要注意的是，infer 只能在条件类型的 extends 子句中使用，同时 infer 声明的类型变量只在条件类型的 true 分支中可用。

了解完这些知识之后，我们来看一下如何获取 T1 函数类型的返回值类型：

type UnpackedFn<T> = T extends (...args: any[]) => infer U ? U : T;
 
type U1 = UnpackedFn<T1>; // string

现在我再来看ReturnType的实现 是不是就豁然开朗了。

拓展

type Unpacked<T> =
    T extends (infer U)[] ? U :
    T extends (...args: any[]) => infer U ? U :
    T extends Promise<infer U> ? U :
    T;
 
type T0 = Unpacked<string>;  // string
type T1 = Unpacked<string[]>;  // string
type T2 = Unpacked<() => string>;  // string
type T3 = Unpacked<Promise<string>>;  // string
type T4 = Unpacked<Promise<string>[]>;  // Promise<string>
type T5 = Unpacked<Unpacked<Promise<string>[]>>;  // string

在以上代码中，Unpacked 工具类型利用了条件类型和条件链，轻松实现了推断出数组类型中元素的类型、函数类型返回值的类型和 Promise 类型中返回值的类型的功能。