title: Type an API response and render it conditionally
body: <p>I am trying to type an API response and render it conditionally in a react component.</p>
  <p>My API returns a Delivery Address which can be either a <strong>Postal Address</strong> with attributes : <code>type</code> (should be <code>&quot;POSTAL&quot;</code>), <code>street</code>, and <code>streetNumber</code></p>
  <p><strong>OR</strong> a <strong>Packstation Address</strong> with attributes: <code>type</code> (should be <code>&quot;PACKSTATION&quot;</code>) <code>packstation</code>, and <code>postNumber</code>.</p>
  <p>Here is my implementation for that :</p>
  <p>(sandbox link : <a href="https://codesandbox.io/s/competent-bird-dx2wp?file=/src/index.tsx:0-474" rel="nofollow noreferrer">https://codesandbox.io/s/competent-bird-dx2wp?file=/src/index.tsx:0-474</a>)</p>
  <p><strong><code>types.ts</code></strong></p>
  <pre><code>export enum AddressType {
    packstation = &quot;PACKSTATION&quot;,
    postal = &quot;POSTAL&quot;
  }
  
  export interface PostalAddress {
    type: AddressType.postal;
    street: string;
    streetNumber: string;
  }
  
  export interface PackstationAddress {
    type: AddressType.packstation;
    packstation: string;
    postNumber: string;
  }
  
  export type DeliveryAddress = PostalAddress | PackstationAddress;
  </code></pre>
  <p><strong><code>DeliveryAddressDisplay.tsx</code></strong></p>
  <pre><code>import * as React from &quot;react&quot;;
  
  import { DeliveryAddress, AddressType } from &quot;./types&quot;;
  
  
  interface Props {
    deliveryAddress: DeliveryAddress;
  }
  
  const DeliveryAddressDisplay = (props: Props) =&gt; {
    // im trying to get the type of the address here so i don't recalculate the same thing in my JSX
    const isPostalAddress: boolean = props.deliveryAddress.type === AddressType.postal;
    const isPackstationAddress: boolean = props.deliveryAddress.type === AddressType.packstation;
  
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h2&gt;
          {isPostalAddress &amp;&amp; &lt;span&gt;Street: {props.deliveryAddress.street}&lt;/span&gt;}
        &lt;/h2&gt;
        &lt;h2&gt;
          {isPackstationAddress &amp;&amp; (
            &lt;span&gt;Packstation: {props.deliveryAddress.packstation}&lt;/span&gt;
          )}
        &lt;/h2&gt;
        &lt;h2&gt;
          {isPostalAddress &amp;&amp; &lt;span&gt;Street Number: {props.deliveryAddress.streetNumber}&lt;/span&gt;}
        &lt;/h2&gt;
        &lt;h2&gt;
          {isPackstationAddress &amp;&amp; (
            &lt;span&gt;Packstation: {props.deliveryAddress.postNumber}&lt;/span&gt;
          )}
        &lt;/h2&gt;
      &lt;/div&gt;
    );
  };
  
  export default DeliveryAddressDisplay;
  </code></pre>
  <p><code>**index.js**</code></p>
  <pre><code>import * as React from &quot;react&quot;;
  import { render } from &quot;react-dom&quot;;
  
  import { AddressType, DeliveryAddress } from &quot;./types&quot;;
  
  import DeliveryAddressDisplay from &quot;./DeliveryAddressDisplay&quot;;
  
  // my api response for example
  const johnsAddress: DeliveryAddress = {
    type: AddressType.postal,
    street: &quot;John's street&quot;,
    streetNumber: &quot;17&quot;
  };
  
  const rootElement = document.getElementById(&quot;root&quot;);
  render(&lt;DeliveryAddressDisplay deliveryAddress={johnsAddress} /&gt;, rootElement);
  </code></pre>
  <p>With this implementation, Typescript is complaining when i try to do conditional rendering in my JSX about the types <code>street</code> and <code>streetNumber</code> that doesn't exist in the <code>PackstationAddress</code> type even though i'm trying to render a <code>PostalAddress</code></p>
  <p>Does anyone have an explanation for this behavior ?</p>