title: Destructuring props in the function parameters using TypeScript
body: <p>I'm trying to my component library to use TypeScript and am attempting to convert a stateless functional component in React from ES6/JavaScript to TypeScript. I am wondering how I can avoid duplicating myself while still being able to deconstruct props outside the function while passing it parameters.</p>
  
  <p>My component currently looks like this:</p>
  
  <pre><code>const allowedColors = {
    warning: "fa fa-exclamation",
    info: "fa fa-info",
    success: "fa fa-check",
    danger: "fa fa-minus-circle"
  };
  
  const AlertIcon = ({ className, color, ...props }) =&gt; (
    &lt;FontAwesomeIcon
      {...props}
      iconClassName={allowedColors[color]}
      className={classNames(`alert-icon-${color}`, className)}
      aria-hidden="true"
      data-ut="alert-icon"
    /&gt;
  );
  
  AlertIcon.propTypes = {
    className: PropTypes.string,
    color: PropTypes.oneOf(Object.keys(allowedColors)).isRequired
  };
  </code></pre>
  
  <p>How would I go about refactoring this into TypeScript?</p>