[TypeScript] type reduction

Type narrowed

What is type reduction?

Type Narrowing in English is Type Narrowing;

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

In a given execution path, we can shrink a type smaller than it was declared, a process called shrinking;

And the typeof padding === "number statement we wrote can be called 类型保护(type guards);

Common types of protection are as follows :

• typeof

• Equal reduction (eg ===, !==)

• instanceof

• in

• and many more…

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

typeof

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

For example, we have the following common, encapsulating a function, the function requires the parameter ID to be passed in, the passed ID may be of type string or may be of type number

When the incoming ID is of type string, it is required to convert all letters of the ID to uppercase

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

// 测试
printID(123)
printID("aaa")

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

Equality narrows

We can express equality using Switch or some of the equality operators (such as === , !== , == , and != ) :

type Direction = "left" | "right" | "top" | "bottom"
function printDirection(direction: Direction) {
    
    
  // 平等类型缩小
  switch (direction) {
    
    
    case "left":
      console.log(direction)
      break
    case "right":
      console.log(direction)
      break
    case "top":
      console.log(direction)
      break
    case "bottom":
      console.log(direction)
      break
    default:
      console.log("调用默认方法")
  }
}

// 测试
printDirection("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) {
    
    
  // 判断time是否是Date的实例
  if (time instanceof Date) {
    
    
    console.log(time.toUTCString())
  } else {
    
    
    console.log(time)
  }
}

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

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

class Teacher {
    
    
  working() {
    
    
    console.log("正在工作")
  }
}

class Student {
    
    
  studying() {
    
    
    console.log("正在学习")
  }
}

function work(p: Student | Teacher) {
    
    
  // 判断是哪一个实例
  if (p instanceof Teacher) {
    
    
    p.working()
  } else {
    
    
    p.studying()
  }
}

// 测试
const stu = new Student()
const tec = new Teacher()

work(stu) // 正在学习
work(tec) // 正在工作

in

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

The in operator returns true if the specified property is in the specified object or its prototype chain;

// () => void表示是一个函数类型
type Dog = {
    
    running: () => void}
type Fish = {
    
    swimming: () => void}

function walk(animal: Dog|Fish) {
    
    
  // 判断函数是否在animal中
  if ("swimming" in animal) {
    
    
    animal.swimming()
  } else {
    
    
    animal.running()
  }
}

// 测试
const dog: Dog = {
    
    
  running() {
    
    
    console.log("狗是跑的")
  }
}
const fish: Fish = {
    
    
  swimming() {
    
    
    console.log("鱼是游的")
  }
}

walk(dog) // 狗是跑的
walk(fish) // 鱼是游的