Union Types

In TypeScript, union types let you express types that could be one of several different things.

Here's an example of a union type in a function argument:

function printId(id: string | number) {
  console.log(`ID is: ${id}`);
}

printId("abc"); // Outputs: ID is: abc
printId(123); // Outputs: ID is: 123

In the example above, the id parameter can be either a string or a number.

Union types can be used with any type, including literals:

type Status = "success" | "failure";

function printStatus(status: Status) {
  console.log(`Status is: ${status}`);
}

printStatus("success"); // Outputs: Status is: success
printStatus("error"); // Type error!

As you can see, union types provide a level of type safety that any type lacks. It prevents errors at compile-time, reducing the chances of runtime issues.

You can include as many members as you want in a union type:

type MassiveUnionType =
  | "animal"
  | {
      whatever: string;
    }
  | boolean
  | (() => void)
  | 100
  | "other string";

#

Examples of Union Types

Here's a list of things you could use union types for in TypeScript:

type HTTPRequestMethods =
  | "GET"
  | "POST"
  | "PUT"
  | "DELETE";

type CSSLengthUnits =
  | "em"
  | "ex"
  | "ch"
  | "rem"
  | "vw"
  | "vh"
  | "vmin"
  | "vmax"
  | "px"
  | "cm"
  | "mm"
  | "in"
  | "pt"
  | "pc";

type UserRoles =
  | "admin"
  | "editor"
  | "contributor"
  | "subscriber";

type PaymentMethods =
  | "credit_card"
  | "debit_card"
  | "paypal"
  | "bank_transfer";

type HTTPResponseStatusCodes =
  | 200
  | 201
  | 400
  | 401
  | 403
  | 404
  | 500;

type NavigationalDirections =
  | "north"
  | "south"
  | "east"
  | "west";

type SocialMediaButtonsIcons =
  | "facebook"
  | "twitter"
  | "instagram"
  | "pinterest"
  | "linkedin";

type TimeZones =
  | "GMT"
  | "EST"
  | "CST"
  | "PST"
  | "JST"
  | "AEST"
  | "CET"
  | "EET"
  | "IST";