title: Why is the Keyword `as` Needed When Narrowing TypeScript Interfaces With an `if`?
body: <p>Given some <strong>interfaces</strong> for <code>Circle</code> and <code>Square</code> as follows:</p>
  <pre class="lang-js prettyprint-override"><code>export default interface Circle {
    radius: number;
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>export default interface Square {
    sideLength: number;
  }
  </code></pre>
  <p>I can use <code>as</code> to calculate the area properly:</p>
  <pre class="lang-js prettyprint-override"><code>function getArea(shape: Circle | Square) {
    if ((shape as Circle).radius) {
      return Math.PI * (shape as Circle).radius ** 2;
    }
  
    return (shape as Square).sideLength ** 2;
  }
  
  const cir = { radius: 5 };
  const sq = { sideLength: 4 };
  
  console.log(getArea(cir), getArea(sq));
  </code></pre>
  <p>However, why can't I simplify the code like this?</p>
  <pre class="lang-js prettyprint-override"><code>function getArea(shape: Circle | Square) {
    return shape.radius ? Math.PI * (shape as Circle).radius ** 2 : shape.sideLength ** 2;
  }
  </code></pre>
  <p>My linter (which is <code>&quot;strict&quot;</code>) complains that: <code>Property 'radius' does not exist on type 'Square'</code></p>
  <p>EXACTLY!  That's why I am doing the conditional checks in my attempted simplification! This is what <strong>narrowing,</strong> is it not?</p>