Union Types

What this module covers

4 steps · TypeScript

1. Step 1. Union Types

   Union types let a variable hold values of more than one type using the | (pipe) operator. let id: string | number; id = "USER_123"; // OK id = 42; // OK function printId(id: string | number): void { if (typeof id === "string") { console.log(id.toUpperCase()); } else { console.log(id.toFixed(2)); } } Type aliases give a union a name: type ID = string | number; type Status = "pending" | "approved" | "rejected"; // a literal union Use typeof checks to narrow primitive types, instanceof to narrow class instances, and the in operator to check for specific properties. Type aliases make union types easier to read and reuse.

   Literal unions are one of TypeScript's most practical patterns — they turn a plain string into a closed, autocompleted, typo-proof set of allowed values. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Add a literal union type called Theme with values "light" and "dark".

2. Step 2. Quiz: Union Types

   Answer these questions about union types.

   The | operator creates a union; literal unions restrict a value to a fixed set of exact values. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Answer the quiz below.

3. Step 3. Unions & Type Aliases

   Create a type alias called Result that is string | number | boolean. Create a type alias called Theme that is a literal union of "light" and "dark". Declare a variable currentTheme of type Theme and assign it "light" or "dark".

   Combining a broad union (Result) with a narrow literal union (Theme) in one exercise shows the full range of what | can express. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Are Result, Theme, and currentTheme all defined correctly?

4. Step 4. Mini project: Union Types

   Create a type alias called Result that is string | number | boolean. Create a type alias called Theme that is a literal union of "light" and "dark". Declare a variable currentTheme of type Theme and assign it "light" or "dark". Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   Combining a broad union (Result) with a narrow literal union (Theme) in one exercise shows the full range of what | can express. This project stage asks you to apply the same idea without step-by-step scaffolding. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Are Result, Theme, and currentTheme all defined correctly?