title: Properly typing useRef values in a React custom hook
body: <p>I have a custom hook that returns a value of <code>useRef</code> in my TS app. Unfortunately it is complaining about the type of the ref I am returning and I have no clue how to properly type this.</p>
  <p>This is what my hook looks like:</p>
  <pre class="lang-js prettyprint-override"><code>
  interface MyHookInterface {
      someBooleanState: boolean
      myRef: HTMLElement | null
  }
  
    
  const useMyHook = (): MyHookInterface =&gt; {
      const [someBooleanState, setSomeBooleanState] = useState&lt;boolean&gt;(false)
      const myRef = useRef&lt;HTMLElement | null&gt;(null)
    
      useEffect(() =&gt; {
        const el = myRef.current // what type should this be?
        // Complaining that el possibly undefined 
        if(el?.offsetWidth &lt; el?.scrollWidth){
            // do stuff
        }
      }, [])
    
      return {
          someBooleanState,
          myRef, // Getting: Type 'MutableRefObject&lt;HTMLElement | null&gt;' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 234 more
      }
    }
    
  </code></pre>
  <p>As you can see in the comments, my hook has a few errors relating to typing:</p>
  <p>1- Do not know how to type <code>myRef</code> in the interface. Keep in mind that it is to be used on multiple types of HTML elements, so I can not specify here whether it will be a div or what.</p>
  <p>2- Do not know how to type <code>el</code>, but the access to its properties is complaining about it being <code>undefined</code></p>
  <p>How can I properly type these values in my hook?</p>