示范校建设网站,网站开发的关键,没有基础怎么学网站建设,贵阳有哪家做网站建设好点的情景再现
有这么一个条件类型的基本语法: T extends U ? X : Y; 如果占位符类型U是一个可以被分解成几个部分的类型#xff0c;譬如数组类型#xff0c;元组类型#xff0c;函数类型#xff0c;字符串字面量类型等。这时候就可以通过infer来获取U类型中某个部分的类型。 …情景再现
有这么一个条件类型的基本语法: T extends U ? X : Y; 如果占位符类型U是一个可以被分解成几个部分的类型譬如数组类型元组类型函数类型字符串字面量类型等。这时候就可以通过infer来获取U类型中某个部分的类型。
我们再看看下面的这个例子
type InferArrayT T extends Arrayinfer U ? U : never; 使用
type I1 InferArray[string, number, true]; // string
type T0 InferArraystring // never 推断结果 我们使用infer关键字声明性地引入了一个名为的新泛型类型变量infer U表示待推断的函数参数 。整句的意思为如果 T 能 赋值给 Arrayinfer U,则结果是Arrayinfer 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 Secondxxx xxx 第一个xxx参数泛型这里肯定传的就是不一样的元组类型第二个xxx就是我们实现的过程我们要取元组的第二项的类型
先来写第一个xxx毕竟比较简单元组就是个特殊的数组我们并不知道数组的每一项会是什么类型所以可以这么写
type SecondTuple extends unknown[] xxx 第一步完成这个extends就是限制了我们传入的元组类型不知道的数组类型PS注意我们unknown类型是除了any以外最底层的。
紧接着第二步我们就要用到infer了还要用到extends的另外一种用法条件判断具体代码如下
type SecondTuple 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 SecondTuple extends unknown[] Tuple extends [infer A, infer B, ...infer C] ? B : nevertype SecondA SecondTupleA
type SecondB SecondTupleB
type SecondC SecondTupleC 使用场景
1.推断数组(或者元组)的类型
type InferArrayT T extends (infer U)[] ? U : never; (infer U)和平时常写的string[]number[]等等是不是很像这里就是通过(infer U)来获取数组对应的类型。 type I0 InferArray[number, string]; // string | number
type I1 InferArraystring[]; // string
type I2 InferArraynumber[]; // number 2.推断数组(或者元组)第一个元素的类型
type InferFirstT extends unknown[] T extends [infer P, ...infer _] ? P : never [infer P, ... infer _]中infer P获取的是第一个元素的类型而...infer _获取的是数组其他剩余元素的数组类型; 特别说明下我们例子汇总不需要使用其他元素的类型所以用_。 type I3 InferFirst[3, 2, 1]; // 3 3.推断数组(或者元组)最后一个元素的类型
type InferLastT extends unknown[] T extends [... infer _, infer Last] ? Last : never; 这个和推断数组第一个元素的类型类似...infer _获取的是最后一个元素之前的所有元素类型infer Last获取的是最后一个元素的类型。 type I4 InferLast[3, 2, 1]; // 1 4.推断函数类型的参数
type InferParametersT 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 InferReturnTypeT extends Function T extends (...args: any) infer R ? R : never; 和前面的推断函数类型的参数类似 后面的infer R代表的就是推断出来的函数的返回值类型。
type I6 InferReturnType() string; // string 6.推断Promise成功值的类型
type InferPromiseT T extends Promiseinfer U ? U : never; type I7 InferPromisePromisestring; // string 7.推断字符串字面量类型的第一个字符对应的字面量类型
type InferStringT extends string T extends ${infer First}${infer _} ? First : []; type I8 InferStringxiumubai; // J 出师时刻
接下来我举一些综合性的例子大家来感受下infer的使用技巧看看是否能一眼看出来实现的功能可以按照对应的题目顺序在评论区留言
// Q1
type ShiftT T extends [infer L, ...infer R]? [...R] : [];
// A? // Q2
type PopT extends any[] T extends [...infer L, infer R] ? [...L] : [];
// A? // Q3
type ReverseT extends unknown[], U extends unknown[] [] [] extends T? U: T extends [infer L, ...infer R]? ReverseR, [L, ...U]: U;
// A? // Q4
type FlipArgumentsT extends Function T extends (...arg: infer R) infer S ? (...arg : Reverse[...R]) S : T;
: T extends [infer L, ...infer R]? ReverseR, [L, ...U]: U;
// A? // Q4
type FlipArgumentsT extends Function T extends (...arg: infer R) infer S ? (...arg : Reverse[...R]) S : T; 最后
最近找到一个VUE的文档它将VUE的各个知识点进行了总结整理成了《Vue 开发必须知道的36个技巧》。内容比较详实对各个知识点的讲解也十分到位。 有需要的小伙伴可以点击下方卡片领取无偿分享
