如何避免重复接口打字稿阵营

问题描述 投票:2回答:2

这是我的第一个程序,我尝试使用打字稿建设。我想保持风格和组件在不同的文件,以使代码更具描述性的和明确的。项目将包括几十个组件的,我会用道具来调用类。每个组件看起来或多或少是这样的:

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",
  }
})

在我想要的类每一个组件类型的任何道具。有没有一种方法,以避免声明接口为每个组件?它的工作原理,但现在我不喜欢我目前的解决方案怎么一回事,因为重复的每一个部件相同的代码。

reactjs typescript material-ui typescript-typings
2个回答
2
投票

做正确的方法是为波纹管。材料的UI暴露WithStyles接口,可以继承,包括classes道具。主要优点是,你IDE将处理定义JSS类自动完成。但无论如何,打字稿比Javacript更详细。与之反应你经常要重复明显的事情。

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)

0
投票

最佳的解决方案是声明延伸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)
© www.soinside.com 2019 - 2024. All rights reserved.