I have some code for a form:
interface FormProps {
regexPreset?: RegexPresets;
customRegex?: RegExp;
description?: string;
inputTitle: string;
errorMessage?: string;
}
const Form: React.FC<FormProps> = props => {
return <div> somestuff </div>
}
If I pass in a customRegex
, I want the compiler to throw an error if errorMessage
is not passed (make errorMessage
a mandatory property).
The closest thing that I've come to is this StackOverflow post, but I'm unsure whether I can apply this to my use case.
Any pointers would be gladly received.
To simplify lets say we have following props
interface FormProps {
inputTitle: string;
description?: string;
customRegex?: string;
errorMessage: string;
}
Here 'inputTitle' prop is mandatory, description
is optional but errorMessage
prop has to be there (mandatory) only when customRegex
(optional) prop is present.
Create a type for non-conditional props
interface FormMainProps {
description?: string;
inputTitle: string;
}
Now create a type for conditional props only when conditional prop 'customRegex' is present
interface FormErrorProps {
customRegex: string;
errorMessage: string;
}
Now create an additional type when conditional prop is not present (to give idea for possible values present in object)
interface FormNotErrorProps {
customRegex?: undefined;
errorMessage?: never;
// important step; so if customRegex prop is not present errorMessage should not be there and vice-versa
}
Now your FormProps will be
type FormProps = FormMainProps & (FormErrorProps | FormNotErrorProps);
Following scenarios will give error as needed:
let a: FormProps;
a = {
inputTitle: "Title",
customRegex: "asdasd"
};
/*
Type '{ inputTitle: string; customRegex: string; }' is not assignable to type 'FormProps'.
Type '{ inputTitle: string; customRegex: string; }' is not assignable to type 'FormMainProps & FormErrorProps'.
Property 'errorMessage' is missing in type '{ inputTitle: string; customRegex: string; }' but required in type 'FormErrorProps'.ts(2322)
*/
a = {
inputTitle: "Title",
errorMessage: "asdasd"
};
/*
Type '{ inputTitle: string; errorMessage: string; }' is not assignable to type 'FormProps'.
Type '{ inputTitle: string; errorMessage: string; }' is not assignable to type 'FormMainProps & FormNotErrorProps'.
Property 'customRegex' is missing in type '{ inputTitle: string; errorMessage: string; }' but required in type 'FormNotErrorProps'.
*/
while below ones are fine:
a = {
inputTitle: "Title",
errorMessage: "asdasd",
customRegex: "Title",
};
a = {
inputTitle: "Title"
};