React: This TS operation shows me

preface

Node_modules /@types/ React /index.d.ts

It’s awesome. I don’t really understand it, but I think it’s awesome.

Google it

But then I googled it and found that it’s called type filtering, and it’s a useful WAY to write TS. Look at the following 🌰 :

 interface Example{
     a:string; b:number; c:number; d:string; . }Copy the code

We have an Example interface, but we want to do something with this interface. We only want to leave attributes of type string. What should we do? We can use our own FilterType.

    type newExample = FilterType<Example,string> // {a:string; d:string; . }
Copy the code

Let’s look at how FilterType is implemented:

    type FilterType<Source, Types> = Pick<
      Source, 
      {
        [K in keyof Source]: Source[K] extends Types ? K : never
      }[keyof Source]
    >;
Copy the code

Analysis of the

First let’s take a look at some utility types that appear in the code. (Big guy skips)

in

In traverses enumerated types, like for… in

type Example = 'a' | 'b' | 'c' | 'd'
type Obj = {
  [T in Example]: string;  // Go through Example and assign each key to string
}
/* Equivalent to type Obj = {a: string; b: string; c: string; d: string; } * /
Copy the code

keyof

This is called the index type query operator, which fetches the key of the type, similar to object.keys (), although I don’t know if the analogy is correct.

interface Example {
    a: string;
    b: string;
    c: number;
    d: boolean;
}
    
type Keys = keyof Example   / / equivalent to type the Keys = 'a' | 'b' | 'c' | 'd'
Copy the code

conditional

interface A {
    a:string;
}

interface B extends A {
    b:string;
} 

// Does B inherit from A? If yes, the value is of the number type. If not, it is a string
type C = B extends A ? number : string  // equivalent to type C = number
Copy the code

To analyze the

First look at an 🌰, unmasking her, no, face mask:

type Mask<source,types> = {
    [K in keyof source]:source[K] extends types ? K : never;
}
interface Example{
    name:string;
    height:number
}
type newType = Mask<Example,string> // { name:'name'; height:never}
Copy the code

{name:’name’; height:never} ,what??? What’s the point?

Don’t worry! Let’s take a look at the following example and peel off her coat: let’s take a look at a simple fact that can be written down in a notebook: index access interface properties

type person = { 
    name:"Angus";
    height:185; } ["name" | "height"]
Copy the code

Is equivalent to:

type person = "Angus" | 185
Copy the code

Note that when value is never, access is lost

type person = { 
    name:"Angus";
    height:185; girlFriend:never; } ["name" | "height" | "girlFriend"]
Copy the code

Is equivalent to

type person = "Angus" | 185
Copy the code

(singleDog self-mockery

So what’s the use of knowing the index access interface attributes? Take a look at the following 🌰 to uncover her clothes:

type Clothes<source,types> = {
    [K in keyof source]:source[K] extends types ? K : never;
}[keyof source]

interface Example{
    name:string;
    height:number;
    home:"string"
}
type newType = Clothes<Example,string> // type newType = "name | home"
Copy the code

So we can get the union type of the type we want. Finally, let’s uncover *** hold on, let’s learn about Pick first. Pick is an object of a type that selects several types to form a new type.

interface Angus{
    name:string;
    height:number;
    wight:number;
}
type newAngus = Pick<Angus,'name' | 'height'> //{name:string; height:number}
Copy the code

Its implementation:

    type Pick<T,K extends keyof T> = {
        [P in K] : T[P];
    }
Copy the code

Then let’s look at 🌰 on Google:

type FilterType<Source, Types> = Pick<
      Source, 
      {
        [K in keyof Source]: Source[K] extends Types ? K : never
      }[keyof Source]
    >;
Copy the code

Is the toilet open!! Using Pick, we can Pick the attributes we want.

    {
       [K in keyof Source]: Source[K] extends Types ? K : never
     }[keyof Source]
Copy the code

These two lines of code will get us the properties we want. One more Pick and you’re done. Have you been shown?

expand

Let’s take a look at some of the other tool types in TS

Omit

Omit(a,b) receives two parameters, the first is the base type to edit and the second is the type you want to delete.

    type Person = {
        name:string;
        sex:string;
    }
    type newPerson = Omit<Person,'name'> // {sex:string}
Copy the code

Here’s how it works:

    type Pick <T,K extends keyof T> = {
        [P in K] : T[P]
    }
Copy the code

Partial

Partial can quickly make properties defined in an interface type Optional.

    type Person = {
        name:string;
        sex:string;
    }
    type newPerson = Partial<Person> // {name? :string; sex? :string}
Copy the code

Here’s how it works:

    type Partial <T> = {
        [P inkeyof T]? : T[P] }Copy the code

Exclude

Deletes a specified type from a type collection.

    type a = string | number
    type newPerson = Exclude<a,string>  //number
Copy the code

Implementation:

    type Exclude<T, U> = T extends U ? never : T
Copy the code

Readonly

Make all attributes of the interface read-only.

    type Person = {
        name:string;
        sex:string;
    }
    type newPerson = Readonly<Person> 
    // type newPerson = {readonly name: string; readonly sex: string; }
Copy the code