TS type gymnastics: illustrating a complex advanced type

Today, let's do a difficult gymnastics , It uses pattern matching 、 structure 、 Recursive equivalent routine , It is very helpful to improve the level of type programming .

The advanced types we want to implement are as follows ：

Its type parameter is the parameter string query string, The parsed parameter object will be returned , If you have a parameter with the same name , Will merge the values .

Don't worry about realizing , Let's first review the relevant types of gymnastics ：

Type gymnastics foundation
Pattern matching
Pattern matching refers to matching a pattern type with a type to extract some of its types to infer Declared local variables .

Like extracting a=b Medium a and b：

This pattern matching routine is in the array 、 character string 、 Functions and other types have many applications .

structure
Mapping types are used to generate index types , The index or index value can be modified during the generation process .

For example, specify key and value To generate an index type ：

recursive
TypeScript Advanced types support recursion , It can handle the problem of uncertain quantity .

For example, the inversion of an indefinite length string ：

type ReverseStr< 
    Str extends string,
    Result extends string = '' 
> = Str extends `${
    infer First}${
    infer Rest}` 
    ? ReverseStr<Rest, `${
    First}${
    Result}`> 
    : Result;
 Copy code 

Learn about pattern matching 、 structure 、 After what recursion is , You can start implementing this complex high-level type ParseQueryString 了 ：

Thought analysis
Suppose there is one query string： a=1&a=2&b=3&c=4.

We should first divide it into 4 part ： That is to say a=1、a=2、b=3、c=4. This is extracted through the pattern matching mentioned above .

Each part can be further processed , Extract key value Constructed as an index type , such as a=1 Can be extracted by pattern matching a、1, Then construct the index type {a: 1}.

That's it 4 Index types {a:1}、{a:2}、{b:3}、{c:4}.

Just combine it into one , When merging, if there are the same key Value , Put it in the array .

The final index type is generated ：{a: [1,2], b: 3, c: 4}

The whole process is like this ：

The first step is not to know how many a=1、b=2 such query param, So we need to recursively do pattern matching to extract .

This is the implementation idea of this advanced type .

Let's write about it in detail ：

Code implementation
We implement it in the order shown in the figure above , First extract query string Each of them query param：

query param The quantity is uncertain , So use recursion ：

type ParseQueryString<Str extends string>
    = Str extends `${
    infer Param}&${
    infer Rest}`
        ? MergeParams<ParseParam<Param>, ParseQueryString<Rest>> 
        : ParseParam<Str>;
 Copy code 

Type parameter Str For pending query string.

Extract the first one through pattern matching query param To infer Declared local variables Param in , The rest of the string is put in Rest in .

use ParseParam To deal with it Param, The rest of the recursive processing , Finally, combine them , That is to say MergeParams<ParseParam<Param>, ParseQueryString> .

If the pattern match does not meet , Explain that there is still one last query param 了 , Also used ParseParam Handle .

Then implement each one separately query param Of parse：

This is pattern matching extraction key and value, Then construct an index type ：

type ParseParam<Param extends string> 
    = Param extends `${
    infer Key}=${
    infer Value}` 
        ? {
     [K in Key]: Value } 
        : {
    };
 Copy code 

Here, the syntax of mapping type is used to construct index type .

Let's test this first ParseParam：

Finish each query param The analysis of , Then merge them together ：

The merged part is MergeParams：

type MergeParams<
    OneParam extends object,
    OtherParam extends object
> = {
    
  [Key in keyof OneParam | keyof OtherParam]: 
    Key extends keyof OneParam
        ? Key extends keyof OtherParam
            ? MergeValues<OneParam[Key], OtherParam[Key]>
            : OneParam[Key]
        : Key extends keyof OtherParam 
            ? OtherParam[Key] 
            : never
}
 Copy code 

The merging of the two index types also requires the construction of a new index type using the syntax of the mapping type .

key Is taken from both, that is key in keyof OneParam | keyof OtherParam.

value There are two situations ：

If both index types exist key, Merge , That is to say MergeValues.
If only one of the index types has , Then take its value , That is to say OtherParam[key] perhaps OneParam[Key].
When merging , If both are the same, either one will be returned , If it's not the same , Merge it into an array and return , That is to say [One, Other]. If it was an array , That is the merging of arrays [One, …Other].

type MergeValues<One, Other> = 
    One extends Other 
        ? One
        : Other extends unknown[]
            ? [One, ...Other]
            : [One, Other];
 Copy code 

Under test MergeValues：

such , We have implemented the whole advanced type , Overall test ：

This case applies recursion synthetically 、 Pattern matching 、 Structured routine , It's more complicated .

You can look at the complete code with reference to this figure ：

type ParseParam<Param extends string> = 
    Param extends `${
    infer Key}=${
    infer Value}`
        ? {
    
            [K in Key]: Value 
        } : {
    };

type MergeValues<One, Other> = 
    One extends Other 
        ? One
        : Other extends unknown[]
            ? [One, ...Other]
            : [One, Other];

type MergeParams<
    OneParam extends object,
    OtherParam extends object
> = {
    
  [Key in keyof OneParam | keyof OtherParam]: 
    Key extends keyof OneParam
        ? Key extends keyof OtherParam
            ? MergeValues<OneParam[Key], OtherParam[Key]>
            : OneParam[Key]
        : Key extends keyof OtherParam 
            ? OtherParam[Key] 
            : never
}

type ParseQueryString<Str extends string> = 
    Str extends `${
    infer Param}&${
    infer Rest}`
        ? MergeParams<ParseParam<Param>, ParseQueryString<Rest>>
        : ParseParam<Str>;


type ParseQueryStringResult = ParseQueryString<'a=1&a=2&b=2&c=3'>;
 Copy code 

summary
We first reviewed 3 The routines of three types of gymnastics ：

Pattern matching ： A type matches a pattern type , Extract some of these types to infer Declared local variables
structure ： Construct a new index type by mapping the syntax of the type , The index and value can be modified during construction
recursive ： When dealing with types with uncertain quantities , You can only process one at a time , Hand over the rest to do
Then use these routines to achieve a ParseQueryString Complex advanced types .

If you can implement this high-level type independently , It shows that you have a good grasp of the routines of these three types of gymnastics .

Last
If you think this article is of little help to you , Point a praise . Or you can join my development communication group ：1025263163 Learn from each other , We will have professional technical questions and answers

If you think this article is useful to you , Please give our open source project a little bit star:http://github.crmeb.net/u/defu Thank you for ！

PHP Learning manual ：https://doc.crmeb.com
Technical exchange forum ：https://q.crmeb.com