我如何在函数组件中使用typeScript作为类型限制和默认值

Question

我有一个函数componet就像例子，我知道如何使用PropTypes设置道具类型并给它们默认值，但我的团队正在使用typescript，所以我必须知道如何使用typescript来获取这个，我试着搜索答案，但我没有得到确切答案，任何人知道如何做到这一点？

例如：

const List = ({title,showTitle,buttonText,onClickButton,itemText}) =>
  <div>
    { showTitle &&
      <Typography
        variant="body1"
        color="textSecondary"
        align="left"
      >
        {title}
      </Typography>
    }
    <ListItem button={false}>
      <ListItemIcon>
        <IconVideocam />
      </ListItemIcon>
      <ListItemText primary={itemText} />
      <ListItemIcon>
        <Button
          id={"Button"}
          onClick={onClickButton}
          color="primary"
        >
          { buttonText }
        </Button>
      </ListItemIcon>
    </ListItem>
  </div>

export default List 

Answer 1

您可以使用React.SFC类型声明无状态React组件的道具，如下所示：

// Props.
interface Props {
  buttonText: string  
  itemText: string
  showTitle: boolean
  onClickButton: () => void
  title: string
}

// List.
const List: React.SFC<Props> = props => <div> .. </div>