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

情景再现

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

 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 

推断结果

我们使用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，即第二项，否则就不返回！

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

最终答案：

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 : nevertype 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; 
: 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; 

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享