title: Type conversion with flow
body: <p>I am trying to write the following lines of code that are supposed to take an object of type <code>ClientRect | DOMRect</code> and convert it into something easier to use.</p>
  
  <p>(<code>ClientRect</code> uses <code>left</code> and <code>top</code>, whereas <code>DOMRect</code> uses <code>x</code> and <code>y</code>)</p>
  
  <pre><code>type Bounds = {|
    x: number,
    y: number,
    width: number,
    height: number,
  |}
  
  function getLocation() =&gt; {
    //ref denote a reference to an HTMLElement
    const rect = ref.current ? ref.current.getBoundingClientRect() : ({ height: 0, width: 0, x: 0, y: 0 }: Bounds);
    if(rect.x!==undefined &amp;&amp; rect.y!==undefined) {
      return ({
        x: rect.x,
        y: rect.y,
        width: rect.width,
        height: rect.height,
      }: Bounds);
    } else {
      return ({
        x: rect.left,
        y: rect.top,
        width: rect.width,
        height: rect.height,
      }: Bounds);
    }
  }
  </code></pre>
  
  <p>In the previous code, <code>ref</code> is a reference to an HTMLElement.</p>
  
  <p><code>getBoundingClientRect()</code> returns an object of type <code>ClientRect | DOMRect</code> whose types are defined as such:</p>
  
  <pre><code>interface ClientRect {
      bottom: number;
      readonly height: number;
      left: number;
      right: number;
      top: number;
      readonly width: number;
  }
  
  interface DOMRect extends DOMRectReadOnly {
      height: number;
      width: number;
      x: number;
      y: number;
  }
  </code></pre>
  
  <p>But with this code, I get from flow:</p>
  
  <pre><code>Cannot get `rect.y` because property `y` is missing in `ClientRect`
  Cannot cast object literal to `Bounds` because property `x` of unknown type [1] is incompatible with number [2] in property `x`
  </code></pre>
  
  <p>So how can I create a function that will give me an object of type <code>Bounds</code> from the object returned by <code>getBoundingClientRect()</code>?</p>