小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
序言:
这是搞定 TS 第五篇,如果没有基础的小伙伴想要从零搞定 TS ,请从第一篇开始juejin.cn/post/701033…
第一题
定义一个 JoinStrArray 工具类型,用于根据指定的 Separator 分隔符,对字符串数组类型进行拼接。具体的使用示例如下所示
type JoinStrArray<Arr extends string[],
Separator extends string, Result extends string = ""> = // 你的实现代码
// 测试用例
type Names = ["Sem", "Lolo", "Kaquko"]
type NamesComma = JoinStrArray<Names, ","> // "Sem,Lolo,Kaquko"
type NamesSpace = JoinStrArray<Names, " "> // "Sem Lolo Kaquko"
type NamesStars = JoinStrArray<Names, "⭐️"> // "Sem⭐️Lolo⭐️Kaquko"
本题考查内容
该题主要考察的是 infer 操作符,模板自变量和递归条件类型
解题思路
- 因为入参是一个数组,我们要重复的取数组中的元素,所以需要用到递归,那么就要做好结束条件的设计。
- 结束条件和字符串拼接,需要 infer 将 待拼接的和剩余的参数分开。等剩余参数没有了,就说明结束了,返回结果。
- 做字符串拼接,需要用到模板自变量。
递归关键点:
- JoinStrArray 的入参是 <数组,符号,和结果>
- 我们要做数组的递归,用 infer 分离出 当前要拼接的元素,和剩余带拼接的数组,
- 把当前要拼接的元素拼接完成后作为 JoinStrArray 的入参结果,剩余的参数作为 入参的数组,符号保持不变,就完成了我们的拼接逻辑。
- 当 剩余参数不为 string[] ,说明没有剩余参数,退出递归。
题解
type JoinStrArray<Arr extends string[], Separator extends string, Result extends string = ""> =
//第一步,使用infer 分离出 当前元素和剩余参数
Arr extends [infer El ,...infer Rest ]
//第二部判断是否有剩余参数
? Rest extends string[]
//第二部判断是否为空数组
? El extends string
//第三步判断是否第一次
?Result extends ""
? JoinStrArray< Rest ,Separator,`${El}`>
:JoinStrArray<Rest,Separator,`${Result}${Separator}${El}`>
:`${Result}`
:`${Result}`
:`${Result}`
type Names = ["Sem", "Lolo", "Kaquko"]
type NamesComma = JoinStrArray<Names, ","> // "Sem,Lolo,Kaquko"
type NamesSpace = JoinStrArray<Names, " "> // "Sem Lolo Kaquko"
type NamesStars = JoinStrArray<Names, "⭐️"> // "Sem⭐️Lolo⭐️Kaquko"
小结:本题主要关键点在于用 infer 分离出递归的结束条件,然后模板自变量做拼接。
第二题
实现一个 Trim 工具类型,用于对字符串字面量类型进行去空格处理。具体的使用示例如下所示
type Trim<V extends string> = // 你的实现代码
// 测试用例
Trim<' coolFish '>
//=> 'coolFish'
本题考查内容
模板自变量和递归的使用
解题思路
我们要思考如何去掉一个空格呢?我们利用模板自变量,和 infer 操作符,分离出空格和内容,取出内容,就能去掉一个空格,再加入递归就能去掉多个空格。我们考虑到还有左右两种情况的空格。
type clearLeft<V extends string> = V extends ` ${infer R}` ?clearLeft<R>:V
type clearRight<V extends string> = V extends `${infer R} ` ?clearRight<R>:V
type Trim<V extends string> = clearRight<clearLeft<V>>
// 测试用例
type test = Trim<' coolFish '>
//=> 'coolFish'
小结:我们用模板自变量的方法一个一个的把空格去掉了