ts类型体操学习笔记之来一道基础ts的infer小题练练手

555 阅读3分钟

大家好,我是梅利奥猪猪,就是盛产水文的那个!曾经想把用最简单的话讲解Utility Types系列写完的,无奈太忙+自己真的太水了+也不善于写文章,就搁浅了好久。正巧,我仰慕的一个大佬神说要有光写了小册类型体操,赶紧买好支持下大佬,这不正好可以学习+写水文+巩固知识+做笔记(帮大家白嫖)嘛!我争取每次吸收个小知识,在自己举一反三出点小题给大家做着玩,于是这篇水文诞生了!(PS:本篇文章灵感来自类型体操小册第四节之推导:infer)

先看题

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

老板:“梅利奥猪猪啊,你看这里有3个元组类型,我特别喜欢元组类型的第二项,你们能不能取到第二项类型并告诉我是什么”

我:“wtf,这直接用眼看不就知道,分别是boolean,string,number,还要我取,搞事情啊”

老板:“嗯说的很好,你明天不用来了”

分析

这用眼看肯定不靠谱啊,万一以后有几百个,几千个元组类型,你都用眼看回复老板是不是不太靠谱!老板要的就是类型体操!所以我们要做的就是!写代码,用infer取到元组的第二项类型(PS:小册这边演示的是取元组的第一项)

我们先把架子搭好

type Second<xxx> = xxx

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

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

type Second<Tuple extends unknown[]> = xxx

恭喜你,第一步完成,这个extends就是限制了我们传入的元组类型,不知道的数组类型,嗯完美

紧接着第二步,我们就要用到infer了,还要用到extends的另外一种用法,条件判断,其实说的太复杂不如直接show兄弟们代码更直接

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

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

题做完了,来看下最终的答案是否正确吧

a.png

b.png

c.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>

课后练习

刚看不练,可就没意思了,现在给XDM出几道小题练练,并附上答案的链接!各位看官请看!

课后题目

  1. 取Promise泛型中的类型
Promise<string>

// 如何取到string
  1. 获取元组第一项类型,最后一项类型,第一项以外的剩余类型,最后项以外的剩余类型

答案链接

typescript的playground链接在此