让我百思不得其解的infer究竟是怎么推导类型的?

1,662 阅读5分钟

情景再现

有这么一个条件类型的基本语法:

 T extends U ? X : Y;

如果占位符类型U是一个可以被分解成几个部分的类型,譬如数组类型,元组类型,函数类型,字符串字面量类型等。这时候就可以通过infer来获取U类型中某个部分的类型。

我们再看看下面的这个例子

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

使用

type I1 = InferArray<[string, number, true]>; // string
type T0 = InferArray<string> // never

推断结果

image.png image.png

我们使用infer关键字声明性地引入了一个名为的新泛型类型变量infer U表示待推断的函数参数 。整句的意思为:如果 T 能 赋值给 Array<infer U>,则结果是Array<infer U> 里的类型U,否则返回never

从上面可以看出,只要是我们传入的时候是数组string[]无论你传入什么类型,它都给你推导出来,如果是只传递了string,这时候推导的它根本不是个数组,条件判断为false,直接返回never

相信通过上面这个粗俗又晦涩例子大家可以明白infer到底能干嘛,以及在什么时候干,大家只需要记住下面的两点:

infer语法的限制如下:

  1. infer只能在条件类型的 extends 子句中使用
  2. infer得到的类型只能在true语句中使用, 即X中使用

初试牛刀

下面我们来看一道类型体操题目来加深一下infer的用法。

题目:

type TupleA = [number, boolean, string]
type TupleB = [boolean, string, number, unknown?]
type TupleC = [number, number, boolean, boolean]

问题:

这里有3个元组类型,取出元组类型的第二项,取到的第二项类型是什么?

分析:

虽然看上面的三个元祖类型很少,一眼就看出来里面的第二项是什么类型,但是,如果给你几百个几千个呢?这时候就需要我们使用infer来解决了。

首先

type Second<xxx> = xxx

第一个xxx参数,泛型这里肯定传的就是不一样的元组类型;第二个xxx就是我们实现的过程,我们要取元组的第二项的类型!

先来写第一个xxx,毕竟比较简单,元组就是个特殊的数组,我们并不知道数组的每一项会是什么类型,所以可以这么写

type Second<Tuple extends unknown[]> = xxx

第一步完成,这个extends就是限制了我们传入的元组类型,不知道的数组类型(PS:注意我们unknown类型是除了any以外最底层的)。

紧接着第二步,我们就要用到infer了,还要用到extends的另外一种用法,条件判断,具体代码如下:

type Second<Tuple extends unknown[]> = Tuple extends [infer A, infer B, ...infer C] ? B : never

简单的说,我们这边分别用infer占位了,第一项A,第二项B,然后用展开运算,剩余项用C表示,如果符合了我们这个条件,返回就是B,即第二项,否则就不返回!

题做完了,我们来验证一下答案是否正确:

image.png image.png image.png 可以看到,我们的三个元祖的第二项都是正确的返回了类型

最终答案:

type TupleA = [number, boolean, string]
type TupleB = [boolean, string, number, unknown?]
type TupleC = [number, number, boolean, boolean]

type Second<Tuple extends unknown[]> = Tuple extends [infer A, infer B, ...infer C] ? B : never

type SecondA = Second<TupleA>
type SecondB = Second<TupleB>
type SecondC = Second<TupleC>

使用场景

1.推断数组(或者元组)的类型

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

(infer U)和平时常写的string[]number[]等等是不是很像?这里就是通过(infer U)来获取数组对应的类型。

type I0 = InferArray<[number, string]>; // string | number
type I1 = InferArray<string[]>; // string
type I2 = InferArray<number[]>; // number

2.推断数组(或者元组)第一个元素的类型

type InferFirst<T extends unknown[]> = T extends [infer P, ...infer _] ? P : never

[infer P, ... infer _]infer P获取的是第一个元素的类型,而...infer _获取的是数组其他剩余元素的数组类型;
特别说明下,我们例子汇总不需要使用其他元素的类型,所以用_

type I3 = InferFirst<[3, 2, 1]>; // 3

3.推断数组(或者元组)最后一个元素的类型

type InferLast<T extends unknown[]> = T extends [... infer _, infer Last] ? Last : never;

这个和推断数组第一个元素的类型类似,...infer _获取的是最后一个元素之前的所有元素类型,infer Last获取的是最后一个元素的类型。

type I4 = InferLast<[3, 2, 1]>; // 1

4.推断函数类型的参数

type InferParameters<T extends Function> = T extends (...args: infer R) => any ? R : never;

...args 代表的是函数参数组成的元组, infer R代表的就是推断出来的这个函数参数组成的元组的类型。

type I5 = InferParameters<((arg1: string, arg2: number) => void)>; // [string, number]

5.推断函数类型的返回值

type InferReturnType<T extends Function> = T extends (...args: any) => infer R ? R : never;

和前面的推断函数类型的参数类似,=> 后面的infer R代表的就是推断出来的函数的返回值类型。

type I6 = InferReturnType<() => string>; // string

6.推断Promise成功值的类型

type InferPromise<T> =  T extends Promise<infer U> ? U : never;
type I7 = InferPromise<Promise<string>>; // string

7.推断字符串字面量类型的第一个字符对应的字面量类型

type InferString<T extends string> = T extends `${infer First}${infer _}` ? First : [];
type I8 = InferString<"xiumubai">; // J

出师时刻

接下来我举一些综合性的例子,大家来感受下infer的使用技巧,看看是否能一眼看出来实现的功能,可以按照对应的题目顺序在评论区留言

// Q1
type Shift<T> = T extends [infer L, ...infer R]? [...R] : [];
// A:?
// Q2
type Pop<T extends any[]> = T extends [...infer L, infer R] ? [...L] : [];
// A:?
// Q3
type Reverse<T extends unknown[], U extends unknown[] = []> = [] extends T
  ? U
  : T extends [infer L, ...infer R]
  ? Reverse<R, [L, ...U]>
  : U;
// A:?
// Q4
type FlipArguments<T extends Function> = T extends (...arg: infer R) => infer S ? (...arg : Reverse<[...R]>) => S : T;