title: How to avoid 'any' and provide correct type in typescript code?
body: <p>My task is to improve the current TypeScript, avoiding using <code>any</code> type at the same time. The thing is that sometimes it is pretty hard to understand what should be there instead as part of the code is a legacy code.</p>
  <p>Could you please give me any tips how to look for the proper types in the cases that are not that obvious (besides obviously hovering over some things)?</p>
  <p>What would be the best way to investigate this <code>payload</code> thing and <code>X,Y,Z</code>?</p>
  <p>I know <code>any</code> is okay when used with some 3rd party libraries etc. but what about these cases for example? How should I avoid <code>any</code> in cases like HOC when testing the type of the thing is much harder?</p>
  <pre><code>export default ({ classes, label, payload }: Props): JSX.Element =&gt; (
    &lt;div className={classes.background}&gt;
      &lt;Typography className={classes.label} variant=&quot;subtitle2&quot;&gt;
        {label} - {payload.find((item) =&gt; item.dataKey === 'value')?.value || '-'}
      &lt;/Typography&gt;
    &lt;/div&gt;
  );
  
  interface Props {
    classes: Partial&lt;ClassNameMap&gt;;
    label: string;
    payload: any;
  }
  </code></pre>
  <hr />
  <pre><code>import React, { useEffect } from 'react';
  
  export default (WrappedComponent: React.ComponentType) =&gt; ({ X, Y, Z }): JSX.Element =&gt; {
    useEffect(() =&gt; {
      if (!X.length) {
        Y();
      }
    }, [X, Y, Z]);
  
    return (
      &lt;WrappedComponent /&gt;
    );
  
  };
  </code></pre>