使用TypeScript分解功能参数中的道具

时间:2018-10-01 23:09:29

标签: reactjs typescript

我正在尝试使用TypeScript的组件库,并尝试将React中的无状态功能组件从ES6 / JavaScript转换为TypeScript。我想知道如何避免重复自己,同时仍然能够在传递参数时解构函数外的道具。

我的组件当前如下所示:

const allowedColors = {
  warning: "fa fa-exclamation",
  info: "fa fa-info",
  success: "fa fa-check",
  danger: "fa fa-minus-circle"
};

const AlertIcon = ({ className, color, ...props }) => (
  <FontAwesomeIcon
    {...props}
    iconClassName={allowedColors[color]}
    className={classNames(`alert-icon-${color}`, className)}
    aria-hidden="true"
    data-ut="alert-icon"
  />
);

AlertIcon.propTypes = {
  className: PropTypes.string,
  color: PropTypes.oneOf(Object.keys(allowedColors)).isRequired
};

如何将其重构为TypeScript?

1 个答案:

答案 0 :(得分:6)

type Color = "warning" | 'info'| 'success' | 'danger'

interface IProps {
  color: Color
}

const AlertIcon = ({ className, color, ...props }: IProps) => { ... }

现在,当您使用AlertIcon时,color道具的类型必须为Color

要考虑传递HTML属性(例如className),可以执行以下操作:

interface IProps extends HTMLAttributes<HTMLElement> { ... }

其中HTMLElement是您的元素类型。