I started to investigate React Redux TypeScript combo last winter. I had already used TypeScript in AngularJS (1.X) and Angular development, and I had seen the obvious advantages of using TypeScript’s type system in big frontend projects. My goal was to create modular React Redux Typescript seed application that would maximise the use of types in every situation to make the frontend development less prone to error.
When I started developing React components, I soon noticed that writing them with TypeScript is as easy as it is in ES6. Setting types to React components properties and state variables were working wonderfully and Typings provided by DefinitelyTyped were working fine. At first I was just testing with React, but then I also wanted to add Redux to my application.
With Redux things started to go little bit harder. Connecting the container components had problems and defining the interfaces were painful. Of course I could’ve write “any type” to everywhere that I had problems but that would’ve been against my original goal to maximise the use of types. Also the fact that using “magic strings” in redux actions was not satisfying at all. But then I came across a solution where TypeScript’s discriminated union types were used in Actions and Redux Property definitions. This causes quite lot boilerplate code to be written per each action, but still we get quite nice type safe solution.
I also wanted to have router in my application and I wanted to store the router state also to the store. React router v4 was quite easy to take into the project. React router redux v5 is still in beta stage, but it was also working fine. Only problem is that Route component typings require that React component is defined with RouteComponentProps properties (https://github.com/DefinitelyTyped/DefinitelyTyped/issues/13689). At the moment the solution would be to create wrapper method or cast the component. In my solution I’m using casting
Starter project can be found from github: https://github.com/monadoy/react-typescript-starter
Note that the project is not perfect or ready yet. It still needs good way to handle component based styles and I also would like to introduce the Selectors (https://github.com/reactjs/reselect) to the Ducks/Modules.
Upcoming weeks I will be updating the starter project and writing more detailed blog posts about the implementation.
—
Aki Haapamäki – Senior Software Engineer
Monad Ltd.
