Skip to content

Instantly share code, notes, and snippets.

@krawaller
Last active May 13, 2017 05:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save krawaller/f0d12beb6a5593b10614e96455080ec3 to your computer and use it in GitHub Desktop.
Save krawaller/f0d12beb6a5593b10614e96455080ec3 to your computer and use it in GitHub Desktop.
typed connect

To create a container, I only need to add my AppState typings to the mapStateToProps parameter:

const mapStateToProps = (state: State) => ({
  messages: state.messaging.messages
});

const mapDispatchToProps = (dispatch) => ({
  dismissUIMessage: (num) => dispatch(actions.dismissUIMessage(num))
});

Now I get full support inside:

I created a tiny props helper type...

export type Props<T> = React.Props<JSX.Element> & T;

...and now I would create a PFC like this...

export interface UIMessageItemProps {
  message: UIMessage;
  delete: Function;
}

export const UIMessageItem = (props: Props<UIMessageItemProps>) => (
  <div className={'ui-message ui-message' + props.message.type}>
    {props.message.text} <span onClick={e => props.delete()}>delete</span>
  </div>
);

...getting full TS support inside...

...and outside:

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