title: Union Types expecting other type when passed as props to component?
body: <p>I'm using Typescript with React. </p>
  
  <p>I am retrieving data from an API that returns two type: <code>VirtualMachine</code> or <code>Disk</code>. The backend takes responsibility for distinguishing the resource type and returns the type of both depending on the results of the query:</p>
  
  <pre><code>requestMoreInfo: (resourceType: string, resourceId: number): AppThunkAction&lt;ResourceActions&gt; =&gt; (dispatch, getState) =&gt; {
      let fetchResourceInfo = fetch('http://localhost:5004/GetResourceTypeInformation/' + resourceType + '/' + resourceId, {
          method: 'GET'
      })
  </code></pre>
  
  <p>I've declared a union type for my Redux state: </p>
  
  <pre><code>export interface ResourceState {
      currentResourceInformation?: VirtualMachineInformation | DiskInformation;
  }
  </code></pre>
  
  <p>and I am subsequently converting the response to the type determined by the resource type passed into the function and dispatching an action to update my components state. THIS IS WHERE I THINK I'M GOING WRONG.</p>
  
  <pre><code>if (resourceType == "Virtual Machine") {
    var vmResponse = response.json() as VirtualMachineInformation;
  
    dispatch({
      type: 'RECEIVE_RESOURCE_INFO',
      resourceInfo: vmResponse
    });
  }
  else if (resourceType == "Disk") {
    var diskResponse = response.json() as DiskInformation;
    dispatch({
      type: 'RECEIVE_RESOURCE_INFO',
      resourceInfo: diskResponse
    });
  }
  </code></pre>
  
  <p>TypeScript appears to be happy with this. However, I am then trying to render a child component and passing this update state as a prop:</p>
  
  <pre><code>private requestResourceInformation = (resourceType: string, resourceId: number) =&gt; {
      this.props.requestMoreInfo(resourceType, resourceId);
  
      if (resourceType == "Virtual Machine") {
          return &lt;VirtualMachineResource virtualMachine={this.props.currentResourceInformation} /&gt;
      }
  }
  </code></pre>
  
  <p>This just maps a table with the data.</p>
  
  <p>However, I'm retrieving the error: </p>
  
  <pre><code>  Type 'VirtualMachineInformation | DiskInformation | undefined' is not assignable to type 'VirtualMachineInformation | undefined'.
      Type 'DiskInformation' is not assignable to type 'VirtualMachineInformation | undefined'.
        Type 'DiskInformation' is not assignable to type 'VirtualMachineInformation'.
          Property 'azureVmId' is missing in type 'DiskInformation
  </code></pre>
  
  <p>I believe this is because TypeScript still considers the value as the union type and the expected value is present in <code>VirtualMachine</code> type but no present in the <code>Disk</code> type.</p>
  
  <p>Where am I going wrong with this? Is there an explicit way to declare the specific type of the union after retrieving the data?</p>