Destructuring props in the function parameters using TypeScript

Question

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.

My component currently looks like this:

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

How would I go about refactoring this into TypeScript?

Uzi · Accepted Answer · 2018-10-02 00:15:38Z

99

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.

edited Oct 2, 2018 at 0:15

answered Oct 1, 2018 at 23:34

Uzi

2,68416 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

unional Over a year ago

Need to add [x: string]: any to your IProps

unional Over a year ago

error. see: typescriptlang.org/play/…

Uzi Over a year ago

there's a better way to achieve that. see my edit. in anyway, your suggestion enables passing undeclared props which is not very type-safe.

Uzi Over a year ago

yes, once you get the color name, mapping is up to you. what you did before will work.

BruceJo Over a year ago

Also, nicely explained here: medium.com/@rileyhilliard/…

|

Collectives™ on Stack Overflow

Destructuring props in the function parameters using TypeScript

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related