Skip to content

Instantly share code, notes, and snippets.

@blindbox
Last active January 5, 2018 15:38
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save blindbox/784c8c4e68c9f1252bd4dfa1f2f56404 to your computer and use it in GitHub Desktop.
Save blindbox/784c8c4e68c9f1252bd4dfa1f2f56404 to your computer and use it in GitHub Desktop.
import * as React from 'react'
// typeTools.ts
// https://stackoverflow.com/a/46944148
interface Func<T> {
([...args]: any, args2?: any): T // tslint:disable-line
}
export function returnType<T>(func: Func<T>): T {
return (false as any) as T
}
// end typeTools.ts
interface ExposedProps { // props that you pass in from the parent component
someExposedProp: SomeOtherType,
}
const mapStateToProps = (state: State): ReduxStates => {
return {someState: someStateSelector(state)}
}
const mapDispatchToProps = { // short-hand dispatch syntax ftw
someDispatcher,
}
const mapStateToPropsTypeMaker = returnType(mapStateToProps)
type ReduxStates = typeof mapStateToPropsTypeMaker
type Props = ExposedProps & typeof mapDispatchToProps & ReduxStates
class ConnectedComponentBase extends React.Component<Props> {}
export const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(ConnectedComponentBase) as any as React.ComponentClass<ExposedProps> // any is required to silence all complaints about incompatible types. It makes sense, ConnectedComponentBase might contain props that exceeds what's available for ExposedProps.
@quantuminformation
Copy link

Would be great to have a detailed blog post about this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment