support for conditional props based on variant

[amaankulshreshtha]

There are instances where we only need certain props based on a variation of the component.

For example:

Let's say we have an Input component and there are two variations of that component; valid and invalid. We would like to pass a prop called errorMsg only when the Input variant is set to invalid.

// Correct: no complaints from the compiler.
<Input variant="invalid" errorMsg="you have an error" />

// Wrong: compiler should complain.
<Input variant="valid" errorMsg="you have an error" />

I tried using "discriminated union"

type InputProps = RestyleFunctions & ({ variant?: 'invalid'; errorMsg: string } | { variant?: 'valid'; errorMsg: never })

This throws a Types incompatibility error.

Could you please tell me if there is a way to achieve this functionality?

If not can the support for this functionality be added?