[英]How to declare this existing variable's type when playing Typescript system in React?
I am playing Typescript with React lately, and after copy&paste this example code that works under ES6 to my .tsx file, my Typescript environment tells me the following error " Parameter 'theme' implicitly has an 'any' type."
我最近正在用React玩Typescript,然后将可在ES6下运行的示例代码复制并粘贴到我的.tsx文件中,然后我的Typescript环境告诉我以下错误" Parameter 'theme' implicitly has an 'any' type."
and my browser refuse to render. 而我的浏览器拒绝渲染。
import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
const styles = theme => ({
root: theme.mixins.gutters({
paddingTop: 16,
paddingBottom: 16,
marginTop: theme.spacing.unit * 3,
}),
});
function PaperSheet(props) {
const { classes } = props;
return (
<div>
<Paper className={classes.root} elevation={4}>
<Typography variant="headline" component="h3">
This is a sheet of paper.
</Typography>
<Typography component="p">
Paper can be used to build surface or other elements for your application.
</Typography>
</Paper>
</div>
);
}
export default withStyles(styles)(PaperSheet);
How can I fix it? 我该如何解决? What type theme
should I declare? 我应该声明什么类型的theme
?
If you use the option noImplicitAny
or strict
you need to specify types where the compiler can't infer them (this is a good thing). 如果使用选项noImplicitAny
或strict
,则需要指定编译器无法推断它们的类型(这是一件好事)。 In this case theme
should be of type Theme
and you should also provide a type for props
: 在这种情况下, theme
应该是类型的Theme
,你也应该为一个类型props
:
import * as React from 'react';
import { withStyles, Theme } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
const styles = (theme : Theme) => ({
root: theme.mixins.gutters({
paddingTop: 16,
paddingBottom: 16,
marginTop: theme.spacing.unit * 3,
}),
});
function PaperSheet(props : { classes: { root: string } }) {
const { classes } = props;
return (
<div>
<Paper className={classes.root} elevation={4}>
<Typography variant="headline" component="h3">
This is a sheet of paper.
</Typography>
<Typography component="p">
Paper can be used to build surface or other elements for your application.
</Typography>
</Paper>
</div>
);
}
export default withStyles(styles)(PaperSheet);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.