title: TypeScript - 'Element' is not assignable to HTMLInputElement
body: <p>I am working with TypeScript and React. In my component, which is a dialog window, I want to store the trigger element, such as a button as a property. When the component unmounts, I want to return focus to that element. However, I am receiving an error from TSLint that I am not sure how to resolve.</p>
  
  <pre><code>class Dialog extends React.Component&lt;Props, {}&gt; {
    ...
    focusedElementBeforeDialogOpened: HTMLInputElement;
  
    componentDidMount() {
      this.focusedElementBeforeDialogOpened = document.activeElement;
      ...
    }
    ...
  }
  </code></pre>
  
  <p>I am receiving the error on the line where I am assigning the property value:</p>
  
  <pre><code>[ts] Type 'Element' is not assignable to type 'HTMLInputElement'.
    Property 'accept' is missing in type 'Element'.
  </code></pre>
  
  <p>However, if I change the type of the property to <code>Element</code> or even <code>HTMLInputElement</code> I receive an error in <code>componentWillUnmount()</code></p>
  
  <pre><code>componentWillUnmount() {
      ...
      this.focusedElementBeforeDialogOpened.focus();
  }
  </code></pre>
  
  <p>This error is in regards to Element type not having the <code>focus()</code> method.</p>
  
  <p><strong>Question</strong></p>
  
  <p>Is there a way to tell TypeScript that <code>document.activeElement</code> should be an input type? Something like</p>
  
  <p><code>this.focusedElementBeforeDialogOpened = &lt;HTMLInputElement&gt;document.activeElement;</code></p>
  
  <p>Or is there a better way around this so declare the type that supports both <code>document.activeElement</code> and <code>.focus()</code>?</p>