TypeScript learning notes reduce

Type reduction

What is type reduction?

The English of type reduction is Type Narrowing;

We can change the execution path of TypeScript through judgment statements similar to typeof padding === "number";

In a given execution path, we can narrow down the types smaller than when declared, and this process is called shrink;

And the typeof padding === "number statement we write can be called type guards;

There are several common types of protection:

typeof
Equality reduction (such as ===, !==)
instanceof
in
etc…

We mainly explain the four types of typeof, equality reduction, instanceof, and in

typeof

In TypeScript, checking the returned value typeof is a type protection: because TypeScript encodes how typeof operates different values.

For example, we have the following common one, encapsulating a function, the function requires the parameter ID to be passed in. The incoming ID may be the string type, and the number type may be

When the incoming ID is of string type, all letters of the ID are required to be converted to capitalization

function printID(id: string|number) {
  if (typeof id === "string") {
    (())
  } else {
    (id)
  }
}

// testprintID(123)
printID("aaa")

In the above code, the entire if judgment statement is to reduce the type. For example, when the code enters the first branch of the if statement, it must be of string type, and when entering the second branch, it must be of number type.
If judgment statement is called type protection

Equal shrinkage

We can use Switch or some equal operators to express equality (for example === , !== , == , and != ):

type Direction = "left" | "right" | "top" | "bottom"
function printDirection(direction: Direction) {
  // Equality type reduction  switch (direction) {
    case "left":
      (direction)
      break
    case "right":
      (direction)
      break
    case "top":
      (direction)
      break
    case "bottom":
      (direction)
      break
    default:
      ("Call the default method")
  }
}

// testprintDirection("left")
printDirection("right")
printDirection("top")
printDirection("bottom")

instanceof

JavaScript has an operator to check if a value is an "instance" of another value:

function printTime(time: string|Date) {
  // Determine whether time is an instance of Date  if (time instanceof Date) {
    (())
  } else {
    (time)
  }
}

// testprintTime("2020-01-02")
const date = new Date()
printTime(date)

If you don't understand it, we can look at the following example

class Teacher {
  working() {
    ("Working")
  }
}

class Student {
  studying() {
    ("Studying")
  }
}

function work(p: Student | Teacher) {
  // Determine which instance it is  if (p instanceof Teacher) {
    ()
  } else {
    ()
  }
}

// testconst stu = new Student()
const tec = new Teacher()

work(stu) // Studyingwork(tec) // Working

in

Javascript has an operator that determines whether an object has a property with a name: in operator

If the specified property is in the specified object or its prototype chain, the in operator returns true;

// () => void means that it is a function typetype Dog = {running: () =&gt; void}
type Fish = {swimming: () =&gt; void}

function walk(animal: Dog|Fish) {
  // Determine whether the function is in animal  if ("swimming" in animal) {
    ()
  } else {
    ()
  }
}

// testconst dog: Dog = {
  running() {
    ("Dogs run")
  }
}
const fish: Fish = {
  swimming() {
    ("The fish swims")
  }
}

walk(dog) // Dogs runwalk(fish) // The fish are swimming

Summarize

This is all about this article about TypeScript type reduction. For more related TypeScript type reduction content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!