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
  • 相关阅读:
    Shader_ShaderForge_NGUI_流光&波纹&消融
    “PurMVC”在Unity中的应用
    springboot整合jdbc
    ajax属性详解
    FreeMarker 日期转换失败
    freemarker404解决方案(全面)
    @RequestParam,@PathParam,@PathVariable等注解区别
    @RestController和@Controller区别
    通过code去获取他的枚举
    Servlet(三)ServletContext
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5961916.html
Copyright © 2011-2022 走看看