Defining interdependent props in Typescript for React Components

3 min readDec 21, 2018

using Discriminated Unions.

This is not something new or fancy. Just writing because it’s not a common pattern for a lot of React Components.

Why?

For example, let’s say you have a date picker component, react-calendar, which provides you the functionality of doing both, selecting just a date or a date-range, which is controlled by the selectRange prop.

We can define the props of Calendar like this:

Here, I am defining the ValueType to be either a single Date or a tuple of two Dates (narrowing the definition constraint that it will have length two, instead of using Date[]). This works fine when I pass a single date in the value as props but typescript starts telling me that I haven’t handled the tuple case in the onChange function.

Typescript throws error that I have not handled the tuple case.

In older versions of Typescript (< 2.6) you could fix this error by defining the type of value in your onChange function. But this is a callback function, not a utility function that your code calls. So you should not be defining what parameters your function accepts but rather the Component should be defining what parameters will be provided. So the fix that you were applying was not a fix but a hack. This was allowed in older versions of Typescript because not a lot of libraries were typed and you needed function bi-variance. Read more about that here.

Now that the community has typed and covered a whole lot of cases we can get stricter with this and enable strictFunctionalTypes. This flag ensures a callback functions are checked against the parameters being passed by the caller. Which leads us to this error.