This is the sixth day of my participation in the November Gwen Challenge. See details: The Last Gwen Challenge 2021.

Dear, hello, everyone. I am “Front-end Xiaoxin”. 😇 has been engaged in front-end development and Android development for a long time

Intersection Types (symbol: &, Intersection Types) :

The purpose of a crossover type is to combine multiple types into a single type, which contains all the characteristics of the type. There are many ways to extend types in TypeScript, such as blending, inheritance, implementation, etc. Cross types should be considered when the actual operating environment is not suitable for object-oriented operations.

** Case study: ** We still define a Person class as the base, define a boxing interface, we finally define a player, this player is the Person class and boxing interface superimposed.

// Person
class Person {
  name: string;
  gender: boolean; age? :number;
  constructor(name: string, gender: boolean, age: number) {
    this.name = name;
    this.gender = gender;
    this.age = age; }}Copy the code
// Boxing
interface Boxing {
  punches(): void;
}
Copy the code
// sportsman
const sportsman: Person & Boxing = {
  name: "Master of MMA".gender: true.age: 35.punches: () = > {
    console.log("Punch 💪"); }};Copy the code

Joint type (symbol: “|”, the Union Types)

Joint type of application is at the time of we define some functions need to incoming parameter types are not specific, such as can be introduced into the parameter of type string, number, Boolean, at this time we can be done by “|” type of joint.

class Person {
  name: string;
  gender: boolean; age? :number;
  constructor(name: string, gender: boolean, age: number) {
    this.name = name;
    this.gender = gender;
    this.age = age; }}class Animal {
  name: string;
  gender: boolean; age? :number;
  constructor(name: string, gender: boolean, age: number) {
    this.name = name;
    this.gender = gender;
    this.age = age; }}function say(arg: Person | Animal) :void {
  console.log(arg.name, arg.gender);
}
Copy the code

Type protection & type differentiation

The above joint type is the definition way when we need to pass in multiple types of parameters. After the definition, we can directly call the same properties and functions in multiple types in the actual use, but different content should be distinguished clearly which type is unique. This is usually done by checking whether an attribute or function exists, as follows:

function say(arg: Person | Animal) :void {
  if (arg.name) {
    console.log(arg.name); }}Copy the code

Let’s see how type assertions work:

  function say(arg: Person | Animal) :void {
    console.log((<Person>arg).name);
    console.log((<Animal>arg).name);
  }
Copy the code

Typeof type protection:

Instanceof type protection:

function say(arg: Person | Animal) :void {
  if (arg instanceof Person) {
    console.log(arg.name);
  }
  if (arg instanceof Animal) {
    console.log(arg.name); }}Copy the code

Learn more about type protection in the next article.

Welcome to follow my public account “Front-end Xiaoxin students”, the first time to push original technical articles.