How to avoid repeating interface in Typescript React

Question

It's my first app I try to build using Typescript. I want to keep styles and components in separate files to make the code more descriptive and clear. Project will consist of dozens of components and I'll use props to call the classes. Each component will look more or less like this:

import * as React from 'react'
import withStyles from "@material-ui/core/styles/withStyles"
import { LandingPageStyles } from "./landing-page-styles"

interface LandingPageProps {
  classes: any
}

class LandingPage extends React.Component<LandingPageProps> {

  get classes() {
    return this.props.classes;
  }

  render() {
    return(
      <div className={this.classes.mainPage}>
        Hello Typescript
      </div>
    ) 
  }
}

export default withStyles(LandingPageStyles)(LandingPage)

And simplified styles module :

import { createStyles } from "@material-ui/core";

export const LandingPageStyles = () => createStyles({
  mainPage: {
    textAlign: "center",
    minHeight: "100vh",
  }
})

In every component I want to have the classes props with type of any. Is there a way to avoid declaring interface for each component? It works now but I don't like my current solution beacuse of repetition the same code in every single component.

Alexandre Annic · Accepted Answer · 2019-02-03 12:09:40Z

2

The proper way to do it is as bellow. Material-ui expose WithStyles interface that you can inherit to include classes props. The main advantage is that you IDE will handle autocompletion for the defined jss class. But anyway Typescript is more verbose than Javacript. With React you often have to repeat obvious things.

import * as React from 'react'
import {withStyles, WithStyles} from "@material-ui/core"
import { LandingPageStyles } from "./landing-page-styles"

interface LandingPageProps extends WithStyles<typeof LandingPageStyles> {
}

class LandingPage extends React.Component<LandingPageProps> {

  get classes() {
    return this.props.classes;
  }

  render() {
    return(
      <div className={this.classes.mainPage}>
        Hello Typescript
      </div>
    ) 
  }
}

export default withStyles(LandingPageStyles)(LandingPage)

edited Feb 3, 2019 at 12:09

answered Feb 3, 2019 at 11:13

Alexandre Annic

10.9k6 gold badges44 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

muszynov · Accepted Answer · 2019-02-03 11:30:52Z

0

The best solution is to declare interface which extends WithStyles . So in component there is need to declare:

import * as React from 'react'
import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles"
import { LandingPageStyles } from "./landing-page-styles"

interface LandingPageProps extends WithStyles<typeof LandingPageStyles>{

}
class LandingPage extends React.Component<LandingPageProps> {

  get classes() {
    return this.props.classes;
  }

  render() {
    return(
      <div className={this.classes.mainPage}>
        Hello Typescript
      </div>
    ) 
  }
}

export default withStyles(LandingPageStyles)(LandingPage)

answered Feb 3, 2019 at 11:30

muszynov

3298 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to avoid repeating interface in Typescript React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related