title: TypeScript + useRef<X|Y>: Type X is not assignable to type Y
body: <p>This simple component:</p>
  <pre><code>const Editable = ({multiline}: { multiline: boolean }) =&gt; {
      const ref = useRef&lt;HTMLInputElement|HTMLTextAreaElement&gt;(null);
      return &lt;div&gt;
          {multiline ? &lt;textarea ref={ref}/&gt; : &lt;input ref={ref}/&gt;}
      &lt;/div&gt;
  }
  </code></pre>
  <p>Have the following TypeScript errors:</p>
  <pre><code>Error:(7, 32) TS2322: Type 'RefObject&lt;HTMLInputElement | HTMLTextAreaElement&gt;' is not assignable to type 'string | ((instance: HTMLTextAreaElement | null) =&gt; void) | RefObject&lt;HTMLTextAreaElement&gt; | null | undefined'.
    Type 'RefObject&lt;HTMLInputElement | HTMLTextAreaElement&gt;' is not assignable to type 'RefObject&lt;HTMLTextAreaElement&gt;'.
      Type 'HTMLInputElement | HTMLTextAreaElement' is not assignable to type 'HTMLTextAreaElement'.
        Type 'HTMLInputElement' is missing the following properties from type 'HTMLTextAreaElement': cols, rows, textLength, wrap
  Error:(7, 53) TS2322: Type 'RefObject&lt;HTMLInputElement | HTMLTextAreaElement&gt;' is not assignable to type 'string | ((instance: HTMLInputElement | null) =&gt; void) | RefObject&lt;HTMLInputElement&gt; | null | undefined'.
    Type 'RefObject&lt;HTMLInputElement | HTMLTextAreaElement&gt;' is not assignable to type 'RefObject&lt;HTMLInputElement&gt;'.
      Type 'HTMLInputElement | HTMLTextAreaElement' is not assignable to type 'HTMLInputElement'.
        Type 'HTMLTextAreaElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, checked, and 23 more.
  </code></pre>
  <p>The errors could be ignored using this following line:</p>
  <pre><code>const ref = useRef&lt;any&gt;(null);
  </code></pre>
  <p>How can <code>useRef</code> be used with the correct type and without errors?</p>