Question

这是我尝试使用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 的类props。有没有一种方法可以避免为每个组件声明接口？现在可以使用，但是我不喜欢我当前的解决方案，因为在每个组件中重复相同的代码。

Answer 1

正确的方法如下。 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)

Answer 2

最好的解决方案是声明扩展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)

如何避免在Typescript React中重复界面

2 个答案: