Destructuring props in the function parameters using TypeScript

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

interface IProps {
  color: Color
}

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

now when you use AlertIcon the color prop must be of type Color

to account for passing HTML attributes, like className you can do this:

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

where HTMLElement is your type of element.