title: React HOC TypeScript get rid of any type with Redux connect
body: <p>General idea is a wrapper component that provides translation ability.</p>
  <p>Btw, full example is here <a href="https://codesandbox.io/s/quizzical-hellman-v84ed" rel="nofollow noreferrer">https://codesandbox.io/s/quizzical-hellman-v84ed</a> or GitHub <a href="https://github.com/hitrov/translation-wrapper" rel="nofollow noreferrer">https://github.com/hitrov/translation-wrapper</a></p>
  <p>Here's HOC signature</p>
  <pre><code>export const wrapper = &lt;P extends object&gt;(Component: React.ComponentType&lt;P&gt;) =&gt;
    (props: P &amp; WithReplacementProps &amp; IProps) =&gt; {...}
  </code></pre>
  <p>Argument component must provide content by</p>
  <pre><code>interface WithReplacementProps {
    translatableProps: {
      getHeader(): string;
      getContent(): string;
    }
  }
  </code></pre>
  <p>Redux should inject</p>
  <pre><code>interface IProps {
    language: string;
  
    setLanguage(language: string): SetLanguage;
  }
  </code></pre>
  <p>and that's how it's being done</p>
  <pre><code>type StateProps = Pick&lt;IProps, | 'language'&gt;;
  type DispatchProps = Pick&lt;IProps, | 'setLanguage'&gt;;
  type OwnProps = Omit&lt;
    IProps,
    keyof StateProps | keyof DispatchProps
  &gt;;
  
  const connector = connect&lt;StateProps, DispatchProps, OwnProps, RootState&gt;((state: RootState) =&gt; ({
    language: state.language,
  }), {
    setLanguage,
  });
  </code></pre>
  <p>The problem is that I always getting TypeScript errors when I'm trying to replace <code>&lt;any&gt;</code> with something that would allow safely check types.</p>
  <pre><code>export function withReplacement&lt;T&gt;(Component: React.ComponentType&lt;T&gt;) {
    return connector(wrapper&lt;any&gt;(Component));
  }
  </code></pre>
  <p>here's finally how I use wrapped component</p>
  <pre><code>const ContentWithReplacement = withReplacement(Content);
  ...
  &lt;ContentWithReplacement
            key={header}
            header={header}
            content={content}
            translatableProps={{
              getContent: () =&gt; content,
              getHeader: () =&gt; header,
            }}
          /&gt;
  </code></pre>
  <p>Content component is straighforward</p>
  <pre><code>export function Content(props: ContentProps) {
    const { translatedProps } = props;
  
    return (
      &lt;&gt;
        &lt;h1&gt;{translatedProps &amp;&amp; translatedProps.header}&lt;/h1&gt;
        &lt;p&gt;{translatedProps &amp;&amp; translatedProps.content}&lt;/p&gt;
      &lt;/&gt;
    );
  }
  </code></pre>