最好的网站建设哪家好成都网络营销
情景再现
有这么一个条件类型的基本语法:
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个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
有需要的小伙伴，可以点击下方卡片领取，无偿分享