Suppose you have a contact info type containing email
and phone number
in which one of them is mandatory but not both.
How are we going to tell Typescript that if email is defined, then phone number is optional or if phone number is defined then email is optional?
You may be attempting to make both of them optional as the following:
export type ContactInfo = {
email?: string;
phoneNumber?: string;
}
But with that approach, none of the email or phoneNumber property is required and the following syntax is valid:
// valid
const johnDoeContact: ContactInfo = {};
The solution
We can use Typescript Discriminated Unions to solve it:
export type ContactInfoRequiredEmail = {
email: string;
phoneNumber?: string;
};
export type ContactInfoRequiredPhoneNumber = {
email?: string;
phoneNumber: string;
};
export type ContactInfo =
| ContactInfoRequiredEmail
| ContactInfoRequiredPhoneNumber;
Now Typescript will throw error with the previous example of John Doe contact but will accept the following example:
// not valid
const johnDoeContact: ContactInfo = {};
// valid
const janeContact: ContactInfo = {
email: 'janecontact@domain.com',
};
// also valid
const jamesContact: ContactInfo = {
phoneNumber: '+261343790400',
};
Source link
lol