TypeScript Quick Start Tutorial, Union Type & Cross Type & Type Protection for Mobile Client Developers

Joint and cross types are actually a very common case in life.

  • Cucumber, do you think he is a fruit or vegetable?
  • Does tomato belong to fruit or vegetable?
  • So what about fruit cucumbers?

In fact, if we just look at cucumbers and tomatoes, it can be considered as either fruit or vegetable. In fact, it is decided by the scene that I want to cook. It is vegetable, take raw food, or chop fruit.

Based on the above points of knowledge, we can understand as follows:

  • The union type, which can be either A or B, is A | B in pseudocode
  • The crossover type, whose type contains the characteristics of A and B, is A & B if pseudocode represents it.

Based on the above analysis, we first defined a fruit-vegetable interface for easy use.

Fruit connector

interface Fruits{

    /**
     * Name
     */
    name: string

    /**
     * eat raw food
     */
    eatRawFood(): void
}

Vegetable connector

interface Vegetables{

    /**
     * Name
     */
    name: string

    /**
     * Cook a dish
     */
    cooking() : void
}

1. Joint Type

Like one🍅,I can eat as fruit and I can cook as vegetable.In this scenario, you cannot define a single deterministic type.The union type (A | B) can then be used to define:

function eatTomatoType(type: Fruits | Vegetables) {
	//Method Body
}

Is it perfect, you think it's OK?

Then the problem comes again~😄,Find out I'm starting to triple.

Like I have one now🍅,I think about what I'm going to eat?

function eatTomatoType(type: Fruits | Vegetables) {
    console.log(type.name);
   	type.cooking() //error
   	type.eatRawFood()  //error
}

Suppose I don't have any idea how to eat yet?this🍅The property of type.cooking() and type.eatRawFood() has not been determined at all. I find it impossible to eat them at all until I return to the program.Because it can be fruit or vegetable, the program is in a dilemma.

This is when the type of protection comes on.The primary function of type protection is to help us determine an appropriate way to operate.Type protection is a processing thinking~

Take a closer look at the code

function eatTomatoType(type: Fruits | Vegetables) {
    console.log(type.name);
    //The attribute cooking does not exist on the type Fruits | Vegetables.The property "cooking" does not exist on the type "Fruits".
    // type.cooking()   
    if('eatRawFood' in type){
        //If there is eatRowFood method in the type, it means fruit        
        (type as Fruits).eatRawFood()
    } else {
        (type as Vegetables).cooking
    }
}

A judgment is used here,'eatRawFood'in type is to determine whether the current type contains the eatRawFood method.If the current choice is to eat raw directly, that is, the type of fruit we previously defined.

class Tomato implements Fruits{
    
    name: string = '🍅';
    eatRawFood(): void {
        console.log(`${this.name} Can be eaten raw directly~`);
    }

}
eatTomatoType(new Tomato())

Will eventually print out

🍅
🍅 Can be eaten raw directly~

2. Cross Type

We also use cucumbers as an example. Ordinary cucumbers can be eaten directly, and the taste may be very general. Now the Academy of Agricultural Sciences has studied a new variety of cucumbers to make them both raw and cooked.

The fruit cucumber of this time, if the type represents it, the pseudocode may be cucumber-fruit.

class SuperMarket implements Fruits, Vegetables{
    
    name: string = '🥒Put in Shang Chao';

    cooking(): void {
       console.log(`${this.name}, Can buy to cook!`);
    }
    
    eatRawFood(): void {
        console.log(`${this.name}, Can be bought raw!`);
    }
}


let shoppingCart: Fruits & Vegetables = new SuperMarket();

shoppingCart.cooking()
shoppingCart.eatRawFood()

Okay, now the newly developed fruit cucumber is on the market and the supermarket vegetable and fruit counters are on the shelves.When you buy it back, you can either cook it or eat it raw.

Of course, this example is a bit far-fetched. Understanding the problem is ok ay.

3. Type Protection

In fact, type protection has been used above. Below is a description of the commonly used type protection methods.

  • in type protection
    in is used to determine whether a class belongs to a class, which is useful
'cooking' in Vegetables
  • typeof type protection
    typeof is used to compare type attribution
cooking typeof Function
  • instanceof type protection
    instanceof is primarily used to compare objects
a instanceof A  //Judging Object Attribution
  • Custom Type Protection
    Custom type protection is actually a condition you define.
//For example, your criteria are as follows
A && B //A security type is only one that meets the following criteria

Feel like you guys see this, here's a toast

Keywords: TypeScript H5

Added by coldfiretech on Fri, 03 Sep 2021 04:15:40 +0300