typing_react_with_typescript

Typescript patterns to use with React, Redux, JSS and Material UI

<p>TypeScript has really taken off lately in the React world and rightly so, it&#x27;s a great way to keep your code documented and help you keep some errors at bay.</p><p>I have worked with TypeScript in a few projects the last few years, all involving Angular in some form but never with React so I had some new challenges in front of me when I started my current project with React and TypeScript.</p><h2>Functional components</h2><p>Let us start off easy with a basic functional component:</p><pre><code class="language-javascript">interface OwnProps {
        myProp:string;
      }
      
      const MyButton: React.FC&lt;OwnProps&gt; = (props) =&gt; {
        return (&lt;button /&gt;);
      }
      
      export default MyButton as React.ComponentType&lt;OwnProps&gt;;</code></pre><p>We create an interface called <code>OwnProps</code> where we define all props we want the component to have. </p><p><code>OwnProps</code> is then used to define the component: <code>React.FC&lt;OwnProps&gt;</code> as well as when we export the component <code>as React.ComponentType&lt;OwnProps&gt;</code> to clearly signal what props are available.</p><p>In this basic example it may seem unnecessary but, as we shall see further down, when components get more complex it will save us some headache.
      This approach will also help negate the following error:</p><blockquote><p>error TS2604: JSX element type &#x27;MyComponent&#x27; does not have any construct or call signatures.</p></blockquote><h2>Wrapping another component</h2><p>In some cases you might want to wrap another component and include that components interface in your own. This is usually the case when working with base components from a library and since we use Material UI (MUI for short)as a base component library I will use that in the example.</p><pre><code class="language-javascript">interface OwnProps {
        buttonText:string;
      }
      type Props = OwnProps &amp; ButtonProps;
      
      const MyButton: React.FC&lt;Props&gt; = ({buttonText, ...rest}) =&gt; {
        return (&lt;Button {...rest}&gt;{buttonText}&lt;/Button&gt;);
      };
      
      export default MyButton as React.ComponentType&lt;Props&gt;;</code></pre><p>The <code>Props</code> type can be seen as the sum of all parts that the component will consist of. In this case we want to use <code>ButtonProps</code> from MUIs Button component and merge it with our own and expose both props to the consumers of the component. </p><p>This is still not very advanced but since we use MUI we also use JSS for styling so let us add that to the mix!</p><h2>Using WithStyles and WithTheme</h2><p>Since we use MUI we handle styling with JSS and the generated CSS classes are injected via the <code>withStyles</code> HOC. This caused some issues since a classes object containing the class names is injected into your props and to use classes you would need to include that object in your prop type.</p><p>Luckily we have the WithStyles type to help us! 
      <code>WithStyles&lt;typeof styles&gt;</code> takes a generic type argument of your style object so you don&#x27;t have to worry about it keeping your types DRY.</p><p><a href="https://material-ui.com/guides/typescript/">The typescript section at Material UI</a> explains the problems with withStyles more in detail, ready up on it if you plan to use MUI and TypeScript.</p><pre><code class="language-javascript">const styles: (theme: Theme) =&gt; StyleRules&lt;string&gt; = theme =&gt;
        createStyles({
          root: {
            margin: theme.spacing.unit
          }
        });
      interface OwnProps {
        buttonText:string;
      }
      type PublicProps = OwnProps &amp; ButtonProps;
      type Props = PublicProps &amp; WithStyles&lt;typeof styles&gt;;
      const MyButton: React.FC&lt;Props&gt; = ({classes, buttonText, ...rest}) =&gt; {
        return (
          &lt;Button {...rest} className={classes.root}&gt;
            {buttonText}
          &lt;/Button&gt;);
      };
      export default withStyles(styles)(MyButton) as React.ComponentType&lt;PublicProps&gt;;</code></pre><p>The addition we&#x27;ve done here is adding a <code>PublicProps</code> type and using that instead of the Props type when exporting the component. This is of course because we also want to use WithStyles but not expose it to anyone using the button.</p><p>Had we used the Props type instead of PublicProps we would get a pesky TypeScript error complaining about classes property missing.</p><p><img alt="TS2741: Property &#x27;classes&#x27; is missing in type &#x27;{buttonText: string}&#x27; but required in type &#x27;{ classes: Record&lt;string, string&gt;}&#x27;" src="https://media.graphcms.com/trkCu0vrQDOgc4hbdhKh"/></p><h2>Redux connect and compose</h2><p>But what would React be without state handling? We use Redux for this so let us connect MyButton and get the buttonText prop from state instead.</p><pre><code class="language-javascript">const styles: (theme: Theme) =&gt; StyleRules&lt;string&gt; = theme =&gt;
        createStyles({
          root: {
            margin: theme.spacing.unit
          }
        });
      
      interface StateProps {
        buttonText:string
      }
      interface DispatchProps {
        dispatch: ThunkDispatch&lt;IAppState, undefined, Action&gt;;
      }
      interface OwnProps {}
      type PublicProps = OwnProps &amp; ButtonProps;
      type Props = PublicProps &amp; 
                   DispatchProps &amp; 
                   StateProps &amp; 
                   WithTheme &amp;
                   WithStyles&lt;typeof styles&gt;;
      
      const MyButton: React.FC&lt;Props&gt; = ({classes, buttonText, ...rest}) =&gt; {
        return (
          &lt;Button {...rest} className={classes.root}&gt;
            {buttonText}
          &lt;/Button&gt;);
      };
      
      const mapStateToProps = (state: IAppState): StateProps =&gt; {
        return {
          buttonText: state.buttonText
        };
      };
      
      export default compose(
        withStyles(styles, { withTheme: true }),
        connect&lt;StateProps, DispatchProps, OwnProps, IAppState&gt;(mapStateToProps)
      )(MyButton) as React.ComponentType&lt;PublicProps&gt;;</code></pre><p>We have not started using hooks for our state so we go with the good old connect. Since we now use both <code>connect</code> and <code>withStyles</code> we need to use <code>compose</code> to merge them.</p><p>We create <code>StateProps</code> as return type of <code>mapStateToProps</code> and <code>DispatchProps</code> which types the dispatch function that is returned by default if we don&#x27;t add a <code>mapDispatchToProps</code> function. In out case we use Thunk so if you use some other tool you need to use that instead.</p><p>I have also added an example of using the MUI theme in the component, this is done by adding <code>{ withTheme: true }</code> as a second argument to <code>withStyles</code>. 
      This will inject a theme property into your props so we need to specify that in our <code>Props</code> type using <code>WithTheme</code> from MUI.</p><h2>Bonus: typing the useState hook</h2><p>Not really rocket science but good to know!</p><pre><code class="language-javascript">const [state, setState] = useState&lt;string&gt;(&quot;Hello world!&quot;)`</code></pre><h2>End note</h2><p>TypeScript can be very frustrating when starting out with many errors that are not clear so I hope this article could be of some help or inspiration, it took us a while to settle on a TypeScript pattern that worked for us and helped us mitigate most of the errors that might occur when working with different libraries.</p><p>Feel free to leave any suggestions in the comment field.</p><p><a href="https://gist.github.com/fredrikbergqvist/dcff13628f9ebe3fdc2d28c67f24921c">A gist of the code examples are available at GitHub.</a></p>

Fredrik Bergqvist

Typing React with typescript

Blog posts

Typing React with typescript