zoukankan      html  css  js  c++  java
  • [TypeScript] Using Assertion to Convert Types in TypeScript

    Sometimes the compiler needs help figuring out a type. In this lesson we learn how to help out the compiler with Typescript type assertion.

    We have a SuperHero and a BadGuy. Let's make a function that saves the day if the function's argument is a SuperHero, and a commits a bad deed if its argument is a BadGuy. Our function needs to accept something that could be a SuperHero or a BadGuy.

    interface SuperHero {
      powers: string[];
      savesTheDay: () => void;
    }
    
    interface BadGuy {
      badDeeds: string[];
      getRandomBadDeed: () => string;
      commitBadDeed: () => void;
    }
    
    function saveDayOrBadDeed(something: SuperHero | BadGuy) {
      if (something.powers) {}
    }

    The IDE is telling us something's wrong. 

    assertion.ts(24,19): error TS2339: Poperty 'powers' does not exist on type 'SuperHero | BadGuy'.

    This is because the compiler is evaluating both types of the union-type argument. Since the BadGuy doesn't have powers, something doesn't have powers. We can get a hold of the SuperHero's power's property by asserting that something is a SuperHero.

    An assertion is how we told the compiler, "We have some information about something's type that it doesn't." There are two different syntaxes for assertion. We're using the as type syntax, which goes behind the value. We're putting something in parens in order to isolate it from its property. If we remove the parens we can't make the assertion.

    function saveDayOrBadDeed(something: SuperHero | BadGuy) {
      if ((something as SuperHero).powers) {}
    }
    
    //or 
    
    if (<SuperHero>something.powers) {} // angle bracket syntax, doesn't work with JSX
    function saveDayOrBadDeed(something: SuperHero | BadGuy) {
      if ((something as SuperHero).powers) {
        (something as SuperHero).savesTheDay();
      } else {
        (something as BadGuy).commitBadDeed();
      }
    }
    
    saveDayOrBadDeed(dazzler); // Dazzler transduces sonic vibrations into light to save the day!!!
    saveDayOrBadDeed(badGuy); // BadGuy farts on old folks
  • 相关阅读:
    wtforms
    day 036 线程 -创建,守护线程
    day 035 管道 和数据共享
    day034 锁,信号量,事件,队列,子进程与子进程通信,生产者消费者模型,joinableQueue
    day33 创建进程的方法和相关操作
    day 32并行 并发
    day 31 socketserver 和ftp打印进度条
    day 029 缓冲区和粘包 day 30 粘包的解决
    相关英语简称
    【实战】初识ListView及提高效率
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5961916.html
Copyright © 2011-2022 走看看