Define one prop as optional if another one is of specific enum type

July 27, 2023

Component prop type:

interface IRequireUserPermits {
  minimalRequiredRole: UserRoles;
  allowedPermissions: UserPermissions[];
}

UserRoles is an enum:

export enum UserRoles {
  SUPERADMIN = "SUPERADMIN",
  ADMIN = "ADMIN",
  AGENT = "AGENT",
}

How can I define allowedPermissions prop required only if the minimalRequiredRole prop is UserRoles.AGENT? Or the other way around – how to make prop optional only if the minimalRequiredRole prop is either UserRoles.SUPERADMIN or UserRoles.ADMIN?

Thanks

>Solution :

You are looking for discriminated unions. Instead of interface let’s use type for IRequireUserPermits:

type IRequireUserPermits =
  | {
      minimalRequiredRole: UserRoles.AGENT;
      allowedPermissions: UserPermissions[];
    }
  | {
      minimalRequiredRole: UserRoles.SUPERADMIN | UserRoles.ADMIN;
    };

Testing:

const case1: IRequireUserPermits = {
  minimalRequiredRole: UserRoles.AGENT,
  allowedPermissions: [], // no error
};

const case2: IRequireUserPermits = {
  minimalRequiredRole: UserRoles.ADMIN,
  allowedPermissions: [], // error
};

playground