Typescript | Infere Types from PropTypes

README.md

Infer Types from PropTypes

Result

Limitations

• function arguments (eg. onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void vs. onClick: PropTypes.func.isRequired)
• not sure how to deal with eg. interface IDeleteButtonProps extends IOtherInterface with PropTypes

References

• https://dev.to/busypeoples/notes-on-typescript-inferring-react-proptypes-1g88

index.tsx

import React, { FunctionComponent } from 'react'
import PropTypes from 'prop-types'
import { Button } from '@material-ui/core'
import DeleteIcon from '@material-ui/icons/Delete'

// PROPTYPES
const IDeleteButtonPropTypes = {
  onClick: PropTypes.func.isRequired,
  label: PropTypes.string,
}

const DeleteButtonDefaultProps = {
  label: () => null,
}

// HELPER
type InferPropTypes<
  PropTypes,
  DefaultProps = {},
  Props = PropTypes.InferProps<PropTypes>
> = {
  [Key in keyof Props]: Key extends keyof DefaultProps
    ? Props[Key] | DefaultProps[Key]
    : Props[Key]
}

// OLD TS INTERFACE
// interface IDeleteButtonProps {
//   label?: string
//   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
// }

// NEW TS TYPE
type DeleteButtonProps = InferPropTypes<
  typeof IDeleteButtonPropTypes,
  typeof DeleteButtonDefaultProps
>

const RaDeleteButton: FunctionComponent<DeleteButtonProps> = ({ onClick, label }) => {
  return (
    <Button
      onClick={onClick}
      startIcon={<DeleteIcon />}
    >
      {label}
    </Button>
  )
}

RaDeleteButton.propTypes = IDeleteButtonPropTypes
RaDeleteButton.defaultProps = DeleteButtonDefaultProps

export default RaDeleteButton

I didn't know that either, thanks for making me aware of that.