搞定TS,就靠这个系列(五)

1,501 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

序言:

这是搞定 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 操作符,模板自变量和递归条件类型

解题思路

  1. 因为入参是一个数组,我们要重复的取数组中的元素,所以需要用到递归,那么就要做好结束条件的设计。
  2. 结束条件和字符串拼接,需要 infer 将 待拼接的和剩余的参数分开。等剩余参数没有了,就说明结束了,返回结果。
  3. 做字符串拼接,需要用到模板自变量。

递归关键点:

  1. JoinStrArray 的入参是 <数组,符号,和结果>
  2. 我们要做数组的递归,用 infer 分离出 当前要拼接的元素,和剩余带拼接的数组
  3. 把当前要拼接的元素拼接完成后作为 JoinStrArray 的入参结果,剩余的参数作为 入参的数组,符号保持不变,就完成了我们的拼接逻辑。
  4. 当 剩余参数不为 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>:Vtype clearRight<V extends string> = V extends `${infer R} ` ?clearRight<R>:Vtype Trim<V extends string> = clearRight<clearLeft<V>>
​
// 测试用例
type test  = Trim<' coolFish '>
//=> 'coolFish'

小结:我们用模板自变量的方法一个一个的把空格去掉了 ​