ReactJS properties validation

Question

I'm moving from ReactJs to React-Native and found this function structure in facebook's code for a react-native button:

class Button extends React.Component<{
  title: string,
  onPress: () => any,
  color?: ?string,
  hasTVPreferredFocus?: ?boolean,
  accessibilityLabel?: ?string,
  disabled?: ?boolean,
  testID?: ?string,
}> {
  static propTypes = {
    /**
     * Text to display inside the button
     */
    title: PropTypes.string.isRequired,
    /**
     * Text to display for blindness accessibility features
     */
    accessibilityLabel: PropTypes.string,
    /**
     * Color of the text (iOS), or background color of the button (Android)
     */
    color: ColorPropType,
    /**
     * If true, disable all interactions for this component.
     */
    disabled: PropTypes.bool,
    /**
     * TV preferred focus (see documentation for the View component).
     */
    hasTVPreferredFocus: PropTypes.bool,
    /**
     * Handler to be called when the user taps the button
     */
    onPress: PropTypes.func.isRequired,
    /**
     * Used to locate this view in end-to-end tests.
     */
    testID: PropTypes.string,
  };

  ...
}

In ReactJS I used just to build my components with propTypes checking, so:

a) What is the purpose of having the props specification inside the brackets at the class definition (<{...}> ? Is this available also in normal ReactJS?

b) Will that check the passed properties format? If so, why do I need propTypes here?

Answer 1

For clarity's sake, the proper term for the definition inside the brackets is called a generic, which is like a type argument when the function/class/whatever is unsure what the type of something is, so it lets you fill in the blanks - in this case, the type for the component's props.

Particularly, this syntax looks like Flow, but TypeScript is also a popular option for type checking.

So:

• The generic is used to type check using your component at compile time. This is syntax specific to type checkers, and isn't available in normal JS.
• propTypes is used to check the types during runtime, to improve DX for people who aren't using a type system.

Generally, projects with type systems only opt to use the generic to reduce verbosity, If you're using a type system, propTypes is only really needed if you're releasing the component to the public.