Typescript Tips Series: Proper Typing of react-redux Connected Components

Alex Heitzmann
Jan 16, 2018 · 3 min read

Knewton has been incrementally converting its front-end React and backend Node.js codebases to TypeScript. In this series we highlight pitfalls we have encountered along the way, lessons we’ve learned, and best practices that we’ve developed.

react + react-router + typescript

For our first tip of this series, let’s look at Knewton’s preferred approach to defining the typescript types for a react-redux connected component. As a component author, it’s important to correctly specify your component’s property types so that users of your component reap the full benefits of type checking and aren’t mislead into using your component incorrectly. Doing this is fairly straightforward with a regular React component, but gets a bit more complicated when react-redux is introduced to the picture. If you’re unfamiliar with React, Redux, or react-redux, you’ll want to take a few minutes to read through the the linked docs before continuing on.

Ok then! Without further ado, here is a template showcasing a fully typed component wrapped with react-redux’s connect() higher-order-component:

Future readers, note that this pattern is tested with TypeScript 2.6, React 16.2, and react-redux 5.0.


  • StateProps: The type for the props provided by mapStateToProps()
  • DispatchProps: The type for the props provided by mapDispatchToProps()
  • OwnProps: The type for the props provided by the parent component

The StateProps and DispatchProps types are nice to have, as they help to catch errors in the mapStateToProps and mapDispatchToProps methods at compile time. More important is the OwnProps type, which defines the set of properties available on the redux-connected component that is exported from the module. OwnProps is essentially the public interface of our component, so is the only one of the types that is exported from our module.

The State type represents the internal React component state of MyComponent. This is also defined purely to provide some compile-time checks for the component authors, as the component’s state is private to the component. If your component doesn’t use state, you could omit the State type and define your wrapped component like so:

const MyComponent: React.SFC<Props> = (props: Props) => {

Further Considerations


connect<StateProps, {}, OwnProps>(mapStateToProps)(MyComponent)

Alternate Naming

import { OwnProps as MyComponentProps } from './my-component'


namespace MyComponent {
export interface OwnProps { }
// etc...

type Props = StateProps & DispatchProps & OwnProps
}export class MyComponent extends React.Component<
MyComponent.Props, MyComponent.State> {
export default connect...

Ultimately we decided against this pattern for a couple of reasons:

  1. It is more verbose for the component author.
  2. It forces all of the types to be exported so that they can be used in the component definition.
  3. It’s only useful when importing the wrapped component directly. Generally we would only export the wrapped component for testing — all production code would be expected to use the redux-connected component that is the module’s default export.


If you like our template and want to use it in your own projects, consider checking out this vscode snippet to save some time on the keyboard.

Comments and suggestions are welcome!


The Knewton Blog - Stories about technology, product and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store