【TypeScript】的类型缩小

ゝ一世哀愁。 2023-10-02 20:37 6阅读 0赞

#### 文章目录 ####

*   *  类型缩小
     *   *  typeof
         *  平等缩小
         *  instanceof
         *  in

### 类型缩小 ###

**什么是类型缩小呢？**

> 类型缩小的英文是 Type Narrowing；
> 
> 我们可以通过类似于 `typeof padding === "number"` 的判断语句，来改变TypeScript的执行路径；
> 
> 在给定的执行路径中，我们可以缩小比声明时更小的类型，这个过程称之为缩小;
> 
> 而我们编写的 typeof padding === "number 语句可以称之为 `类型保护`（ type guards）；

**常见的类型保护有如下几种**：

>  *  typeof
>  *  平等缩小（比如===、 !==）
>  *  instanceof
>  *  in
>  *  等等…
> 
> 我们主要讲解typeof、平等缩小、instanceof、in这四种

#### typeof ####

**在TypeScript中，检查返回的值typeof是一种类型保护：因为TypeScript对如何typeof操作不同的值进行编码**。

> 例如我们有下面一个常见, 封装一个函数, 函数要求传入参数ID, 传入的ID有可能是string类型有可能是number类型
> 
> 当传入的ID是string类型时, 要求将ID的字母全部转为大写

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

*  上面代码中, 整个if判断语句就是类型缩小, 例如当代码进入if语句第一个分支时, 一定是string类型, 进入第二个分支一定是number类型
 *  if的判断语句就称为类型保护

#### 平等缩小 ####

**我们可以使用Switch或者相等的一些运算符来表达相等性（比如=== , !== , == , 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 有一个运算符来检查一个值是否是另一个值的“实例”**：

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)

*  如果不好理解我们可以看下面这个例子

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 有一个运算符，用于确定对象是否具有带名称的属性： in运算符**

> 如果指定的属性在指定的对象或其原型链中，则in 运算符返回true；

// () => 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) // 鱼是游的