title: How to migrate mobx-react 5 to 6 with correct typesafe injection?
body: <p>Now I am working with a TypeScript React with class component project and I am gradually migrating to react hooks.</p>
  
  <p>Since mobx react 6 documents said that <code>Store injecting</code> is <a href="https://mobx-react.js.org/recipes-inject" rel="nofollow noreferrer">obsolete</a>.  How can I <strong>gradually</strong> migrate my React class components using old style injecting(@inject) while the project is using mobx-react 6? </p>
  
  <p>There is a <a href="https://mobx-react.js.org/recipes-migration" rel="nofollow noreferrer">Migration guide</a> with example as below code.</p>
  
  <pre><code>import { MobXProviderContext } from 'mobx-react'
  function inject(selector, baseComponent) {
      const component = ownProps =&gt; {
          const store = React.useContext(MobXProviderContext)
          return useObserver(() =&gt; baseComponent(selector({ store, ownProps })))
      }
      component.displayName = baseComponent.name
      return component
  }
  </code></pre>
  
  <p>The problem is what is the correct typesafe of this function. Thanks!</p>
  
  <p>I have try this but I cannot figure <code>baseComponent(selector({ store, ownProps })))</code> type correctly now.</p>
  
  <pre><code>const inject = &lt;InProps, OutProps&gt;(selector: (store: InProps) =&gt; OutProps) =&gt; {
      return &lt;WrappedProps&gt;(baseComponent: React.ComponentClass&lt;WrappedProps&gt; | React.FC&lt;WrappedProps&gt;) =&gt; {
          const component = (ownProps: WrappedProps) =&gt; {
              const store = React.useContext(storesContext)
              return useObserver(() =&gt; baseComponent(selector({ store, ownProps })))
          }
          component.displayName = baseComponent.name
          return component
      }
  }
  </code></pre>