Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.


This is the fourth installment of TS. If you want to get TS from scratch, please start from the first installment…

The first question

Defines a JoinStrArray utility type that concatenates string array types using the specified Separator Separator. An example is as follows

type JoinStrArray<Arr extends string[], Separator extends string, Result extends String = ""> = // Your implementation code // Test case 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"Copy the code

The content of this question

The infer operator, template independent variables and recursive condition types are mainly investigated

Their thinking

  1. Because the incoming parameter is an array, and we’re going to be taking the elements of the array over and over again, we’re going to use recursion, so we’re going to have to design the end condition.
  2. To end the concatenation of conditions and strings, infer is required to separate the parameters to be concatenated from the rest. When the remaining parameters are gone, the end is indicated and the result is returned.
  3. To do string concatenation, you need to use template arguments.

Key points of recursion:

  1. The JoinStrArray entry is < array, symbol, and result >
  2. So we’re going to recurse the array and infer from the current element to be concatenated and the rest of the array,
  3. Join the elements as the result of the JoinStrArray entry, the remaining parameters as the array of the entry parameters, the symbol remains unchanged, and we complete our join logic.
  4. If the remaining parameter is not string[], there are no remaining parameters and the recursion exits.

Answer key

Separator extends String [], Separator extends String, Result extends String = ""> = // Infer Arr extends [infer El,...infer Rest] // Use infer to separate current elements and Rest parameters. Rest extends String [] // Is an empty array? 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"Copy the code

Conclusion: The key point of this topic is to infer the end conditions of recursion and the template variables.

The second question

Implements a Trim utility type used to whitespace string literal types. An example is as follows

Type Trim<V extends String > = // Test case Trim<' coolFish' > //=> 'coolFish'Copy the code

The content of this question

Use of template arguments and recursion

Their thinking

We have to think about how do we get rid of a space? We use template arguments and the infer operator to separate Spaces from content. By taking content out, we can remove one space and add recursion to remove multiple Spaces. Let’s take into account the Spaces in the left and right cases.

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'Copy the code

Summary: We used template arguments to remove the whitespace one by one