Typescript higher order component (hoc) template

hoc-template.tsx

/* variation on https://medium.com/@DanHomola/react-higher-order-components-in-typescript-made-simple-6f9b55691af1 */
import * as React from 'react'
import { wrapDisplayName } from 'recompose'

// Props you want the resulting component to take (besides the props of the wrapped component)
interface ExternalProps {}

// Props the HOC adds to the wrapped component
export interface InjectedProps {}

// Options for the HOC factory that are not dependent on props values
interface Options {
  key?: string
}

const hoc = ({ key = 'Default value' }: Options = {}) => <OriginalProps extends {}>(
  Component: React.ComponentType<OriginalProps & InjectedProps>,
): React.ComponentClass<OriginalProps> => {
  class HOC extends React.Component<OriginalProps & ExternalProps> {
    render() {
      return <div />
    }
  }

  if (process.env.NODE_ENV !== 'production') {
    (HOC as any).displayName = wrapDisplayName(Component, 'hoc')
  }

  return HOC
}

export default hoc

So what is the return of hoc1(hoc2(hoc3(hoc4(hoc5(hoc6(hoc7(hoc8(hoc9(<SomeComponent/>))))))))) What if in 11 files I do this to the same SomeComponent, but in different orders, can I test for equality of Types? Classes? Objects? Anything?

@ashnur sorry but I haven't tested out your example...

I won't have time for this so... it'll be nice if you can create a git repo with your example (I'll star it 👍 )