Flowtype: conditionally required type

Question

I have the following code in my React app:

import isRequiredIf from 'react-proptype-conditional-require'

Auth.propTypes = {
  children: PropTypes.any,
  step: PropTypes.number,
  steps: isRequiredIf(PropTypes.number, props => props.hasOwnProperty('step')),
  footer: PropTypes.any
}

Here steps is required only if step is specified.

I'm migrating my React PropTypes to Flow. Can I somehow achieve the same behavior with Flow?

Answer 1

This can't be done with Flow in this form. Since PropTypes are checked at runtime, and not statically, there can be more flexibility. If a static typechecker allowed this sort of thing, it would be undecidable.

However, you could do something like this:

type Props = {
  children: any,
  // not sure about this name, but you get the idea
  step: ?{
    step: number,
    steps: number,
  },
  footer: any,
}

Or, if you can have steps but not step:

type Props = {
  children: any,
  // not sure about this name, but you get the idea
  step: ?{
    step?: number,
    steps: number,
  },
  footer: any,
}

Obviously, neither of these options is quite as concise as what you have, and it will require changing the code that produces and consumes these values. Unfortunately there is sometimes a price to be paid in order to gain the safety of a static typechecker.

Another option is to just leave them both optional:

type Props = {
  children: any,
  step?: number,
  steps?: number,
  footer: any,
}

This way, Flow won't enforce that steps exists if step exists. However, you won't have to change your other code, and there's nothing stopping you from adding a runtime check (which will be no worse than what you already have).