解决TS题最好的方法就是多练习。这次的interpretingtype-challengesMedium的难度是17~24题。精读Permutation实现Permutation类型，将联合类型替换为可能的全排列：typeperm=Permutation<'A'|'乙'|'C'>;//['A','B','C']|['A','C','B']|['B','A','C']|['B','C','A']|['C','A','B']|['C','B','A']看到这道题，立马想到TS是用分配律对多个关节类型进行泛型处理的。第一次做Exclude题的时候遇到：Exclude<'a'|'b','a'|'c'>//等同于Exclude<'a','a'|'c'>|排除<'b','a'|'c'>所以如果这道题能“递归触发关节类型的分配率”就解决了。但是，触发条件必须有两个泛型，而标题只传入一个，所以我们必须创建第二个泛型，使其默认值等于第一个：typePermutation。说，它会展开如下：Permutation<'A'|'乙'|'C'>//相当于排列<'A'|'乙'|'C','A'|'乙'|'C'>//等价于排列<'A','A'|'乙'|'C'>|排列<'B','A'|'乙'|'C'>|排列<'C','A'|'乙'|'C'>用于排列<'A','A'|'乙'|'C'>，排除自身的组合，可以组成'A'，'B'，'A'，'C'的组合，然后再递归，再拼写，排除已有的，组成全排列A，等等，形成所有字母的完整排列。这里有两点需要注意：如何排除自己？Exclude恰到好处，当T是联合类型P时函数返回never，否则返回T。递归什么时候结束？每次递归时使用Exclude留下未使用的组合。当最后一个组合用完后，never将被剩下，此时递归终止。//这个问题的答案类型Permutation=[T]extends[never]?[]：T扩展了U？[T,...Permutation>]:[]验证答案，先展开Permutation<'A','B','C'>:'A'extends'A'|'乙'|'C'？['A',...排列<'B'|'C'>]:[]'B'扩展'A'|'乙'|'C'？['B',...排列<'A'|'C'>]:[]'C'扩展'A'|'乙'|'C'？['C',...排列<'A'|'B'>]:[]让我们扩展第一行Permutation<'B'|'C'>:'B'扩展'B'|'C'？['B',...Permutation<'C'>]:[]'C'extends'B'|'C'？['C',...Permutation<'B'>]:[]ExpandthefirstrowofPermutation<'C'>:'C'extends'C'?['C',...Permutation]:[]此时已经完成了完整的排列，但我们还必须处理Permutation以便它返回[]并终止递归。那么为什么使用[T]extends[never]而不是Textendsnever呢？如果我们把这道题的答案换成Textendsnever，输出的结果是never，原因如下：typeX=neverextendsnever?1:0//1typeCustom=Textendsnever?1:0typeY=Custom//never理论上是同样的代码，为什么使用泛型后输出变成never了？原因是当TS做Textendsnever?时，会分配关节类型。这时候有一个特例，就是当T=never时，会跳过分配，直接返回T本身，所以三元判断代码并没有真正执行。[T]extends[never]这种写法可以避免TS给关节类型赋值，进而绕过上面的问题。LengthofStringimplementsLengthOfString返回字符串的长度T:LengthOfString<'abc'>//3解决这个问题需要知道一个前提，就是TS可以通过访问[length]数组类型的属性：['a','b','c']['length']//3即我们需要将'abc'转换为['a','b','C']。第二个需要了解的前置知识是，使用infer引用字符串时，first引用第一个字母，second引用剩下的所有字母：'abc'extends`${inferS}${推断E}`?S:never//'a'的转换数组存在于何处？类似js，我们可以得到第二个默认值genericstorage://本题答案typeLengthOfString=Sextends`${inferS}${inferE}`？LengthOfString:N['length']思路是每次将字符串的首字母放入数组N的第一项，直到取出字符串。直接取此时的数组长度。FlattenimplementationtypeFlatten:typeflatten=Flatten<[1,2,[3,4],[[[5]]]]>//[1,2,3,4,5]这题一看就需要递归://这个问题的答案类型Flatten=Textends[inferStart,...inferRest]?(Startextendsany[]?Flatten]>:Flatten):Result这道题好像有点复杂答案，但还是沿用了上一题的套路：递归时如果需要存储临时变量，则使用通用的默认值来存储。在本题中，我们将使用泛型Result来存储平局的结果。每次拿到数组的第一个值，如果第一个值不是数组，就直接存进去，继续递归。这时候T自然就是剩下的Rest；如果第一个值是一个数组，它将被展平。这时候就有一个奇葩的地方，就是……Start被压平之后可能还是一个数组。例如，[[5]]有两层。你能想到吗。..Flatten继续复用递归是解决问题的关键。AppendtoobjectimplementsAppendToObject:typeTest={id:'1'}typeResult=AppendToObject//预计为{id:'1',value:4}结合之前的问题经验，这道题的解法很简单，注意KinKey可以扩展一些指定的Key到对象：//TheanswertothisquestiontypeAppendToObject=Obj&{[KinKey]:Value}当然也有不写Obj&的，即把原来的对象和新的Key结合起来的描述，Value://本题答案typeAppendToObject={[键入（keyofT）|U]：键扩展U?V:T[Exclude]}Absolute实现Absolute将数字转换为绝对值：typeTest=-100;类型Result=Absolute<测试>;//expectedtobe"100"这道题的重点是把数字转换成绝对值字符串，所以我们可以用字符串来匹配：//这道题的答案类型Absolute=`${T}`扩展`-${inferR}`？R:`${T}`为什么不用Textends来判断呢？由于T是一个数字，因此此写入无法匹配符号的字符串描述。StringtoUnion实现StringToUnion将字符串转为联合类型：typeTest='123';类型Result=StringToUnion;//预期为“1”|“2”|"3"还是老套路，使用一个新的泛型存储答案可以递归：//本题答案类型StringToUnion=Textends`${inferF}${inferR}`？StringToUnion:P当然也可以不依赖泛型存储答案，因为这道题比较特殊，可以用|://TheanswertothisquestiontypeStringToUnion=Textends`${inferF}${推断R}`？女|StringToUnion:neverMerge实现Merge合并两个对象，如果发生冲突，后者优先：typefoo={name:string;年龄：字符串；}类型coo={年龄：数字；性别：字符串}类型结果=合并；//应该是{name:string,age:number,sex:string}这道题的答案连上一道题的解题步骤，也就是用一个对象来描述+keyofthinking：//的回答这个问题类型Merge={[KinkeyofA|keyofB]：K扩展了keyofB？B[K]:(KextendskeyofA?A[K]:never)}只知道在keyof中支持元素组和值部分可以通过extends区分，很简单。KebabCase实现驼峰转横线的??功能KebabCase:KebabCase<'FooBarBaz'>//'foo-bar-baz'还是老套路，用第二个参数存储结果，递归遍历字符串，遇到大写时letters转小写加-，最后去掉首字母-：//本题答案typeKebabCase=Sextends`${inferF}${inferR}`？(LowercaseextendsF?KebabCase:KebabCase}`>):RemoveFirstHyphentypeRemoveFirstHyphen=Sextends`-${inferRest}`?Rest:如果把S单独写出来，就很容易理解了。首先，KebabCase每次递归地取第一个字符。如何判断这个字符是否为大写？只要小写不等于原值就是大写，所以判断条件是LowercaseextendsF的false分支。然后写一个函数RemoveFirstHyphen去掉字符串中的第一个-。综上所述，TS是一种编程语言，而不是简单的描述或修饰符。很多复杂类型的问题需要用逻辑思维来实现，而不是简单的查语法。讨论地址为：Jingdu《Permutation, Flatten, Absolute...》·Issue#426·dt-fe/weekly想参与讨论的请戳这里，每周都有新话题，周末或周一发布。前端精读——帮你过滤靠谱的内容。关注前端精读微信公众号版权声明：免费转载-非商业-非衍生保留属性（CreativeCommons3.0License）
