reactjs - Desestructuración de props en los parámetros de la función usando TypeScript

Estoy tratando de que mi biblioteca de componentes use TypeScript y estoy intentando convertir un componente funcional sin estado en React de ES6/JavaScript a TypeScript. Me pregunto cómo puedo evitar duplicarme mientras sigo pudiendo desestructurar las props fuera de la función al pasarle parámetros.

Mi componente actualmente se ve así:

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
};

¿Cómo podría refactorizar esto a TypeScript?

Respuesta #1

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

interface IProps {
  color: Color
}

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

ahora cuando usas AlertIcon la propiedad color debe ser del tipo Color

para tener en cuenta la transmisión de atributos HTML, como className, puedes hacer esto:

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

donde HTMLElement es tu tipo de elemento.