[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(,): 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