How to make a dependent types in Typescript

Pety Ialimijoro Rakotoniaina — Sun, 19 Jan 2025 04:15:42 +0000

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',
};

DEV Community: Pety Ialimijoro Rakotoniaina

How to make a dependent types in Typescript

The solution