Documentation on implementing tagged union validation

[414owen]

Algebraic data types, or tagged unions, represent a choice of multiple shapes.

Say I have an algebraic datatype which can take one of two forms:

// first form
{ type: 'haskeller'
, data:
    { favouriteMonad: 'Tardis'
    }
}

// second form
{ type: 'javascripter'
, data:
    { favouriteLoop: 'forOf'
    , favouriteLibrary: 'lodash'
    }
}

Where type is the discriminant.

At the moment, I'm validating this using:

PropTypes.oneOfType(
  [ { type: PropTypes.oneOf(['haskeller']).isRequired
    , data: PropTypes.shape(
        { favouriteMonad: PropTypes.oneOf([ /* etc */ ]),.isRequired
        }
      ).isRequired
    }
  , { type: PropTypes.oneOf(['javascripter']).isRequired
    , data: PropTypes.shape(
        { favouriteLoop: PropTypes.oneOf([ /* etc */ ]).isRequired
        , favouriteLibrary: PropTypes.oneOf([ /* etc */ ]).isRequired
        }
      ).isRequired
    }
  ]
).isRequired

So several things here:

• Does anyone know of a better way of doing this?
• It would be great to add support for a validator that matches a single literal so PropTypes.oneOf(['haskell']) becomes PropTypes.is('haskell')
• It would be great to get a note in the readme on implementing tagged union validation.

[ljharb]

Based on the two forms you want, I'd expect this (which is very close to what you have):

PropTypes.oneOfType([
  PropTypes.shape({
    type: PropTypes.oneOf(['haskeller']).isRequired,
    data: PropTypes.shape({
      favoriteMonad: PropTypes.string.isRequired,
    }).isRequired,
  }),
  PropTypes.shape({
    type: PropTypes.oneOf(['javascripter']).isRequired,
    data: PropTypes.shape({
      favoriteLoop: PropTypes.string.isRequired,
      favoriteLibrary: PropTypes.string.isRequired,
    }).isRequired,
  }),
])

If you had the two shapes defined separately, it becomes much more readable:

const haskeller = PropTypes.shape({
  type: PropTypes.oneOf(['haskeller']).isRequired,
  data: PropTypes.shape({
    favoriteMonad: PropTypes.string.isRequired,
  }).isRequired,
});

const javascripter = PropTypes.shape({
  type: PropTypes.oneOf(['javascripter']).isRequired,
  data: PropTypes.shape({
    favoriteLoop: PropTypes.string.isRequired,
    favoriteLibrary: PropTypes.string.isRequired,
  }).isRequired,
});

…

PropTypes.oneOfType([haskeller, javascripter])

[414owen]

Thanks @ljharb. It might be nice to have something similar in the docs, I find it hard to imagine it's an uncommon use case.

[ljharb]

A PR to improve the docs is always welcome!