title: Confusion over the logic of "This condition will always return 'false' since the types '"a"' and '"b"' have no overlap."
body: <p>I just started learning TypeScript, and I'm currently reading the handbook. One of the points it makes it that TypeScript catches logic errors, and it gives this example:</p>
  <pre class="lang-js prettyprint-override"><code>const value = Math.random() &lt; 0.5 ? &quot;a&quot; : &quot;b&quot;;
  if (value !== &quot;a&quot;) {
    // ...
  } else if (value === &quot;b&quot;) {
    // This condition will always return 'false' since 
    // the types '&quot;a&quot;' and '&quot;b&quot;' have no overlap.
    // Oops, unreachable
  }
  </code></pre>
  <p>Probably there's just something I'm not seeing straight, but I can't get why this should throw an error. Here's how I see it:</p>
  <ul>
  <li><code>value</code> can be either <code>a</code> or <code>b</code></li>
  <li>The first if statement checks to see if <code>value</code> isn't <code>a</code></li>
  <li>The else-if statement checks if the value <em>is</em> <code>b</code>, which it would always be if it wasn't <code>a</code> (if <code>value</code> is not <code>a</code>; it's <code>b</code>)</li>
  </ul>
  <p>So why does it say <code>value === &quot;b&quot;</code> will always return <code>false</code>? Obviously this doesn't work the way I'm looking at it; it seems like there's something I'm missing. Also I'm not totally sure what <code>overlap</code> in <code>'&quot;a&quot;' and '&quot;b&quot;' have no overlap</code> means, so if someone could help me understand these, it'd be greatly appreciated.</p>