Skip to content

Instantly share code, notes, and snippets.

@tejacques

tejacques/HOCBaseRender.tsx

Last active May 2, 2022 13:05
Show Gist options
  • Save tejacques/54997ef2d6f672314d53 to your computer and use it in GitHub Desktop.
Save tejacques/54997ef2d6f672314d53 to your computer and use it in GitHub Desktop.
Download ZIP
React Higher Order Components in TypeScript
Raw
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}/>;
}
}
}
Raw
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);
}
}
}
Raw
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 }));
Raw
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();
}
}
}
Raw
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>;
}
}
Raw
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'));
@trusktr
Copy link

trusktr commented Dec 21, 2019

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