当前位置: 首页 > Web前端 > JavaScript

TypeScript类型体操姿势合集-轻松解题

时间:2023-03-27 00:45:01 JavaScript

TypeScript类型体操,核心思想是通过类型生成新的类型!记录类型挑战的简单题解,以及解题思路。仓库地址:https://github.com/type-chall...博文地址:https://github.com/FrankKai/F...4-实现Pickkeyof/extends/intypeMyPick={[PinK]:T[P]}解题思路:K是public类型,也就是说K类型是keyofT结果的子集。这样可以保证Pick的第二个参数的类型不在第一个参数的类型中,会提示错误。例如,如果下面的代码传递了一个Todo类型上不存在的'invalid',ts会提示错误"Type'"invalid"'isnotassignabletotype'keyofTodo'."//@ts-expect-errortypenewType=MyPickinterfaceTodo{title:stringdescription:stringcompleted:boolean}https://github.com/type-chall...7-实现ReadonlyreadonlytypeMyReadonly={readonly[PinkeyofT]:T[P]}解题思路是在属性名前加上readonly,即Canberead-only。key部分:使用keyofT得到T的key集合,然后使用Pin遍历,为每个属性名加上readonly标志。取值部分:T[P],复用原来的类型即可。https://github.com/type-chall...11-对象元组扩展/只读/在/T[number]typeTupleToObject={[PinT[number]:P}解题思路的重点是“如何遍历祖先中的每一项?”,每一项都可以通过数字索引得到,即T[number]。为什么Textendsreadonlyany[]?这是因为要传入一个任意类型的数组,而T[]是不合法的,所以需要使用extends构造一个新的类型。https://github.com/type-chall...14-第一个元素extends/never/T[0]typeFirst=Textends[]?从不:T[0];分析思路的第一项可以用T[0]表示。有一个用例需要注意:当数组为空时,第一项表示为never。重点是如何判断一个空数组?有两种方式:Textends[],T["length"]extends0.https://github.com/type-chall...18-获取元组长度extends/readonly/T['length']typeLength=T['length']解题思路T['length']可以返回长度。但是前提是构造一个新的类型,Textendsany[]由于tuple类型是只读的,所以Textendsreadonlyany[]需要和11.Tupletoobjecthttps://github.com/type保持一致-chall...43-Excludeextends/nevertypeMyExclude=TextendsU?never:T解决问题的关键点是如何移除U,如果T中的某一项在U中(TextendsU),return永远不会移除U,否则返回T。https://github.com/type-chall...189-等待#11747infer/recursion/PromisetypeMyAwaited=TextendsPromise?P扩展Promise?MyAwaited

:P:从不;解题思路infer+recursion+Promise对于普通的类型,比如typeX=Promise,用TextendsPromise来判断。但是对于嵌套类型,比如typeZ=Promise>,需要判断P是否为Promise类型,如果是则递归判断。https://github.com/type-chall...268-Ifextendsboolean/extendstrueif=Cextendstrue?T:F如何将泛型限制为布尔类型?C扩展布尔值。如何判断当前泛型是否为真?C扩展为真。https://github.com/type-chall...533-Concat...T解构类型Contact=[...T,...U]解决方案题意数组类型入参:Textendsany[]泛型解构(核心:通过...解构泛型变量):[...T,...U]https://github.com/type-chall...898-包括推断/...T解构/递归类型MyEqual=(()=>TextendsX?1:2)extends(()=>TextendsY?1:2)?true:falsetypeIncludes=Textends[inferP,...inferRest]?MyEqualextendstrue?true:包括:false;解构解题思路+infer+递归判断法:递归取T和U中的第一项判断是否相等。需要实现一个Equal函数,可以使用https://github.com/microsoft/…https://github.com/type-chall…3057-Push…TdeconstructtypePush<官方讨论中的Textendsany[],U>=[...T,U]约束数组类型变量的解题思路:Textendsany[]类型变量解构:...Thttps://github.com/type-chall..3060-Unshift...T解构类型Unshift=[U,...T]解构思路约束数组类型变量:Textendsany[]类型变量解构:...Thttps://github.com/type-chall...3312-ParametersinfertypeMyParametersany>=Textends(...args:inferP)=>unknown?P:从不;解题思路用infer来表示要推断的类型变量。由于...args本身已经是元组类型,所以最后推导的inferP也是元组类型。https://github.com/type-chall…