React Higher Order Components in TypeScript

HOCBaseRender.tsx

import * as React from 'react';
import { Component } from 'react';

export default function HOCBaseRender<Props, State,  ComponentState>(
    Comp: new() => Component<Props & State, ComponentState>) {
    return class HOCBase extends Component<Props, State> {
        render() {
            return <Comp {...this.props} {...this.state}/>;
        }
    }
}

HOCMounted.tsx

import * as React from 'react';
import { Component } from 'react';
import HOCBaseRender from './HOCBaseRender';

export default function HOCMounted<Props, ComponentState>(
    Comp: new() => Component<Props, ComponentState>, onMount: () => void, onUnmount: () => void) {
    return class HOCWrapper extends HOCBaseRender<Props, void, ComponentState>(Comp) {
        // ... Implementation
        componentWillMount() {
            onMount.call(this);
        }
        componentWillUnmount() {
            onUnmount.call(this);
        }
    }
}

HOCNameAndAge.tsx

import * as React from 'react';
import NameAndAge from './NameAndAge';
import HOCStateToProps from './HOCStateToProps';

export default HOCStateToProps<
    { name: string },
    { age: number },
    void>(NameAndAge, () => ({ age: 12 }));

HOCStateToProps.tsx

import * as React from 'react';
import { Component } from 'react';
import HOCBaseRender from './HOCBaseRender';

export default function HOCStateToProps<Props, State, ComponentState>(
    Comp: new() => Component<Props & State, ComponentState>, getState: () => State) {
    return class HOCWrapper extends HOCBaseRender<Props, State, ComponentState>(Comp) {
        // ... Implementation
        constructor() {
            super();
            this.state = getState();
        }
    }
}

NameAndAge.tsx

import * as React from 'react';
import { Component } from 'react';

export default class NameAndAge extends Component<{ name: string, age: number }, void> {
    render() {
        return <div>Name: {this.props.name}, Age: {this.props.age}</div>;
    }
}

ReactHOC.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import HOCNameAndAge from './HOCNameAndAge';

ReactDOM.render(<HOCNameAndAge name='Hello'/>, document.getElementById('root'));

The limitations of declaration emit prevent inferred return types from being compilable to declaration files.

I've opened a request to fix issues like these in TypeScript by bringing declaration files to parity with language features. microsoft/TypeScript#35822