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'));

I believe that due to microsoft/TypeScript#6559 and microsoft/TypeScript#12215 optimal solution (without casting the result) is not possible yet.

Hi ,
could you please help me to find books or resource on how to learn typescript programming am using now same tech you used also same file ext.
but i am learning through shredded information from diffrent websites

here are sample of code i wrote it

import * as React from 'react';
import 'isomorphic-fetch';

interface IDataTunel {
    name: string;
    desription: string;
    forchild: string;
}
interface IContentTunel {
    empdata: EmployeeContacts;
}
class EmployeeContacts {
    public mobile: string;
    public email: string;
    public others: string;

    constructor() {
        this.mobile = "mobile";
        this.email = "email";
        this.others = "others";
    }
}

export class ListItems extends React.Component<IDataTunel, IContentTunel > {
    public constructor() {
        super();
        this.state = { empdata: null };
    }
    componentWillMount() {
        return (
            this.state = { empdata: new EmployeeContacts() }
        );
    };

   public render() {
        return (
            <div className="List_Items">
                <h1>{this.props.forchild} </h1>
                <span><h4>{this.props.name} with type {this.props.desription}</h4></span>
                <br/>
                <button type="Submitt" id="gd" onClick={() => {this.readdata((document.getElementById("id") as HTMLInputElement).value)}}>Display other information</button>
                <ul>
                    <li>Mobile : {this.state.empdata.mobile} </li>
                    <li>Email : {this.state.empdata.email} </li>
                    <li>Others :{this.state.empdata.others} </li>
                </ul>
            </div>
        );
    }
   public readdata(id): EmployeeContacts {
        fetch('/api/SampleData/GetEmployeesContacts?id=' + id).then(response => response.json() as Promise<EmployeeContacts>).then(data => {
            this.setState({ empdata: data });
        });
        return this.state.empdata;
    };
}
export default ListItems
{
}

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