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:
typescript
function printId(id: string | number) {console.log(`ID is: ${id}`);}printId("abc"); // Outputs: ID is: abcprintId(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:
typescript
type Status = "success" | "failure";function printStatus(status: Status) {console.log(`Status is: ${status}`);}printStatus("success"); // Outputs: Status is: successprintStatus("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:
typescript
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:
typescript
type HTTPRequestMethods =| "GET"| "POST"| "PUT"| "DELETE";
typescript
type CSSLengthUnits =| "em"| "ex"| "ch"| "rem"| "vw"| "vh"| "vmin"| "vmax"| "px"| "cm"| "mm"| "in"| "pt"| "pc";
typescript
type UserRoles =| "admin"| "editor"| "contributor"| "subscriber";
typescript
type PaymentMethods =| "credit_card"| "debit_card"| "paypal"| "bank_transfer";
typescript
type HTTPResponseStatusCodes =| 200| 201| 400| 401| 403| 404| 500;
typescript
type NavigationalDirections =| "north"| "south"| "east"| "west";
typescript
type SocialMediaButtonsIcons =| "facebook"| "twitter"| "instagram"| "pinterest"| "linkedin";
typescript
type TimeZones =| "GMT"| "EST"| "CST"| "PST"| "JST"| "AEST"| "CET"| "EET"| "IST";
Share this TypeScript Concept with your friends