Typescript from entry to mastery (XVIII) joint type and type protection

Joint type

It can be understood as A variable Yes Two or more The type of
We write two interfaces PersonH5 and PersonJava Write another way to judge who it is WhoAreYou
There comes a animal( Any value ), At this time, it can be PersonH5 It could be PersonJava

interface PersonH5{
    
	isH5:boolean;
	say:()=>{
    }
}
interface PersonJava{
    
	isH5:boolean;
	say:()=>{
    }
}

The following forms are union types
Joint type , The key symbol is |( A vertical bar ).

function WhoAreYou(animal:PersonH5|PersonJava){
    }
// This is the union type 

Let's write a method

function WhoAreYou(animal:PersonH5|PersonJava){
    
   animal.say() // Report errors 
  // Let's write such a method directly , You're going to report a mistake ,
  // because WhoAreYou Can't accurately judge the specific instance of the union type .
 }

So we need our type assertion

Type protection _ Types of assertions

keyword as

function WhoAreYouOne(animal:PersonH5|PersonJava){
    
    if(animal.isH5){
    
        (animal as PersonH5).say()
        
    }else{
    
        (animal as PersonJava).skill()
    }
}

Type protection _in grammar

We also often use in Syntax for type protection , For example, use if To judge animal Is there any skill() Method .
The specific procedures are as follows :

function WhoAreYouTwo(animal:PersonH5|PersonJava){
    
    if("skill" in animal){
    
        animal.skill()
    }else{
    
        animal.say()
    }
}
/// there else Some can automatically judge , Thanks to the TypeScript Automatic judgment of 

Type protection _typeof grammar

Let's write a new Add Method , Method accepts two parameters , These two parameters can be Numbers number It can also be character string string, If we don't do any type of protection , Just add up , At this point, you will report an error . The code is as follows :

function Add(first: string | number, second: string | number) {
    
  return first + second;// Report errors 
}

Solve this problem , You can use it directly typeof To solve the problem

function Add(first: string | number, second: string | number) {
    
  if (typeof first === "string" || typeof second === "string") {
    
    return `${
      first}${
      second}`;
  }
  return first + second;
}

It's like this , It won't be wrong .

Type protection _instanceof grammar

For example, what needs type protection now is an object , It can be used at this time instanceof Grammar to do . Now write a NumberObj Class , The code is as follows ：

class NumberObj {
    
  count: number;
}

We'll write another one later addObj Methods , The parameters passed at this time , It can be arbitrary object, It can also be NumberObj Example , Then we return the additive value , Of course, there is no type protection , This code must be wrong .

function addObj(first: object | NumberObj, second: object | NumberObj) {
    
  return first.count + second.count;// Report errors 
}

So we can use it instanceof Judge the grammar , You can solve the problem

function addObj(first: object | NumberObj, second: object | NumberObj) {
    
  if (first instanceof NumberObj && second instanceof NumberObj) {
    
    return first.count + second.count;
  }
  return 0;
}

The above four types of protection are commonly used
Be careful ：instanceof Can only be used on classes