这是我的第一个程序,我尝试使用打字稿建设。我想保持风格和组件在不同的文件,以使代码更具描述性的和明确的。项目将包括几十个组件的,我会用道具来调用类。每个组件看起来或多或少是这样的:
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",
}
})
在我想要的类每一个组件类型的任何道具。有没有一种方法,以避免声明接口为每个组件?它的工作原理,但现在我不喜欢我目前的解决方案怎么一回事,因为重复的每一个部件相同的代码。
做正确的方法是为波纹管。材料的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)
最佳的解决方案是声明延伸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)