zoukankan      html  css  js  c++  java
  • TypeScript 联合类型和类型保护

    interface Bird{
      fly: boolean,
      sing: ()=>{}
    }
    
    interface Dog{
      fly: boolean,
      bark: ()=>{}
    }
    /**
     * animal: Bird | Dog这就是一个联合类型
     * animal 既可以是 Bird 又可以是 Dog
     * 联合类型只提示公共的属性
     */
     // 第一种类型保护方案:类型断言的方式
    function trainAnimal(animal: Bird | Dog) {
      /**
       * 这里直接调用 animal.sing() 是会报错的,因为 Dog 不存在 sing()
       * 解决这个问题第一种方案:断言
       */
      if (animal.fly) {
        (animal as Bird).sing(); // 强制告诉 TS,animal 是 Bird 类型
      }
      (animal as Dog).bark();
      
    }
    
    
    // 第二种类型保护方案:in 语法来做类型保护
    function trainAnimal2(animal: Bird | Dog) {
      if ('sing' in animal) { // 告诉 ts animal 里面有 sing
        animal.sing();
      } else { // 上面 animal 有sing, else 就是没有 sing, ts 可以推断出来
        animal.bark();
      }
    }
    
    
    // 第三种类型保护方案: typeof 语法来做类型保护
    function add(first: string | number, second: string | number) {
      /**
       * 这里直接 first + second 也会报错,因为有可能他们是 string 类型
       * 这个时候也可以用类型保护
       */
      if (typeof first === 'string' || typeof second === 'string') {
        return `${first}${second}`;
      }
      return first + second
    }
    
    
    // 第四种类型保护方案: instanceof 语法来做类型保护
    class NumberObj { // 因为只有 class 才能用 instanceof 做类型保护
      count: number
    }
    function addSecond(first: object | NumberObj, second: object | NumberObj) {
        /**
        * 这里直接 first.count + second.count 也会报错,因为有可能他们是 object,没有 count 属性
        * 这个时候也可以用类型保护
        */
      if (first instanceof NumberObj && second instanceof NumberObj) {
        return first.count + second.count;
      }
      return 0;
    }

    总结:类型保护四种方式

    1、类型断言的方式  animal as Bird

    2、in 语法来做类型保护  if ('sing' in animal){}

    3、 typeof 语法来做类型保护  if (typeof first === 'string' || typeof second === 'string') {}

    4、instanceof 语法来做类型保护 if (first instanceof NumberObj && second instanceof NumberObj) {}

  • 相关阅读:
    登录注册页面切换
    LINUX系统日常使用命令
    find命令详解
    ssh命令详解
    tar命令详解
    route命令详解
    uname命令详解
    ps命令详解
    df命令详解
    virsh命令详解
  • 原文地址:https://www.cnblogs.com/wzndkj/p/13150286.html
Copyright © 2011-2022 走看看