Last active
May 2, 2022 13:05
-
-
Save tejacques/54997ef2d6f672314d53 to your computer and use it in GitHub Desktop.
React Higher Order Components in TypeScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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}/>; | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import * as React from 'react'; | |
| import NameAndAge from './NameAndAge'; | |
| import HOCStateToProps from './HOCStateToProps'; | |
| export default HOCStateToProps< | |
| { name: string }, | |
| { age: number }, | |
| void>(NameAndAge, () => ({ age: 12 })); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(); | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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>; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import * as React from 'react'; | |
| import * as ReactDOM from 'react-dom'; | |
| import HOCNameAndAge from './HOCNameAndAge'; | |
| ReactDOM.render(<HOCNameAndAge name='Hello'/>, document.getElementById('root')); |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I believe that due to microsoft/TypeScript#6559 and microsoft/TypeScript#12215 optimal solution (without casting the result) is not possible yet.