Как избежать повторения интерфейса в Typescript React - PullRequest
Новая
       20

Как избежать повторения интерфейса в Typescript React

0 голосов
/ 03 февраля 2019

Это мое первое приложение, которое я пытаюсь построить с использованием Typescript.Я хочу хранить стили и компоненты в отдельных файлах, чтобы сделать код более наглядным и понятным.Проект будет состоять из десятков компонентов, и я буду использовать реквизиты для вызова классов.Каждый компонент будет выглядеть примерно так: 

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)

И модуль упрощенных стилей: 

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

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

В каждом компоненте я хочу, чтобы классы были реквизиты с типом any.Есть ли способ избежать объявления интерфейса для каждого компонента?Это работает сейчас, но мне не нравится мое текущее решение из-за повторения одного и того же кода в каждом отдельном компоненте.

Ответы [ 2 ]

0 голосов
/ 03 февраля 2019

Лучшее решение - объявить интерфейс, который расширяет WithStyles.Поэтому в компоненте необходимо объявить: 

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)
0 голосов
/ 03 февраля 2019

Правильный способ сделать это, как показано ниже.Material-ui предоставляет интерфейс WithStyles, который вы можете унаследовать, чтобы включить classes реквизит.Основным преимуществом является то, что ваша IDE будет обрабатывать автозаполнение для определенного класса jss.Но в любом случае Typescript более многословен, чем Javacript.С React вам часто приходится повторять очевидные вещи. 

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)
...