title: why is typescript complaining when trying to use ref in react?
body: <p>I am using ref to animate elements on scroll.</p>
  <pre><code>  const foo = () =&gt; {
      if (!ref.current) return;
      const rect = ref.current.getBoundingClientRect();
      setAnimClass(
        rect.top &gt;= 0 &amp;&amp; rect.bottom &lt;= window.innerHeight ? styles.animClass : &quot;&quot;
      );
    };
  </code></pre>
  <p>this code worked well in next.js app. but when I am using this in <code>create-react-app</code> type-script template, it is complaining that <code>Object is possibly 'null'.</code></p>
  <p>From <code>if (!ref.current) return;</code> it is clear that program will be returned if ref.current does not exist. But still TypeScript give error on the next line <code>ref.current.getBoundingClientRect()</code>, pointing at the <code>ref</code>.</p>
  <p>How to solve this issue without removing the null checking from typescript config?</p>
  <p>complete file - <a href="https://github.com/mayank1513/react-contact-app/blob/master/src/components/ContactListItem.tsx" rel="nofollow noreferrer">https://github.com/mayank1513/react-contact-app/blob/master/src/components/ContactListItem.tsx</a></p>
  <p>This is the complete project repo - <a href="https://github.com/mayank1513/react-contact-app" rel="nofollow noreferrer">https://github.com/mayank1513/react-contact-app</a></p>
  <p>As of now I have bypassed the issue using <code>&quot;strict&quot;: false</code> in tsconfig. But need to do it in strict mode.</p>
  <p>Similar issue in <a href="https://github.com/mayank1513/react-contact-app/blob/master/src/pages/index.tsx" rel="nofollow noreferrer">this</a> file as well. And this is not resolved even by setting <code>&quot;strict&quot;: false</code> in tsconfig. For now I am just relying on <code>document.getElementById()</code> -- around line 65</p>