Union and Intersection Types

Welcome to the next lesson! In this lesson, you’ll learn how to use union types to allow multiple possible types for a variable and intersection types to combine multiple types into one. These are powerful tools for creating flexible and robust code. Let’s get started!

What Are Union Types?

Union types let a variable hold more than one type. You can use the | symbol to define a union type.

Example: A variable that can be either a string or a number:

Task: Declare a variable with a union type and assign different values to it.

let value: string | number;
value = "Hello";
console.log(value); // Output: "Hello"

value = 42;
console.log(value); // Output: 42

Using Union Types in Functions

You can use union types in function parameters to allow multiple input types. Example:

Task: Write a function that accepts a union type parameter and logs it to the console.

function printValue(value: string | number): void {
  console.log(`The value is ${value}`);
}

printValue("Hello"); // Output: The value is Hello
printValue(100); // Output: The value is 100

What Are Intersection Types?

Intersection types combine multiple types into one. You can use the & symbol to define an intersection type.

Example: Combining two object types:

Task: Create an intersection type to combine two objects and use it.

type Person = { name: string };
type Employee = { employeeId: number };

type Staff = Person & Employee;

let staffMember: Staff = {
  name: "Alice",
  employeeId: 123,
};

console.log(staffMember);

Using Type Guards with Unions

TypeScript doesn’t know which type you’re using in a union type. You can use type guards to narrow the type. Example:

Task: Use type guards to handle different types in a union.

function display(value: string | number): void {
  if (typeof value === "string") {
    console.log(`String value: ${value.toUpperCase()}`);
  } else {
    console.log(`Number value: ${value * 2}`);
  }
}

display("Hello"); // Output: String value: HELLO
display(5); // Output: Number value: 10

Intersection Types in Practice

Intersection types are useful when working with objects that share properties. Example:

Task: Create an intersection type for admin and user roles.

type Admin = { adminLevel: string };
type User = { username: string };

type AdminUser = Admin & User;

let admin: AdminUser = {
  adminLevel: "super",
  username: "admin123",
};

console.log(`Admin ${admin.username} has level ${admin.adminLevel}`);

Common Mistakes with Union and Intersection Types

Here are some common mistakes:

• Using a union type but not handling all possible cases (e.g., forgetting a type guard).
• Overcomplicating types with unnecessary intersections.
• Assigning incompatible values to a union or intersection type.

Tip: Always test your code to ensure the types work as expected!

When to Use Unions and Intersections

Use union types when:

• A variable can have one of several possible types.
• You need flexibility in function parameters.

Use intersection types when:

• Combining multiple objects or types into one.
• Creating more complex types for specific use cases.

Great Job!

Congratulations! You’ve learned how to use union and intersection types to handle complex scenarios in TypeScript. These tools make your code more flexible and expressive. In the next lesson, we’ll explore enums and how they help manage constant values. Let’s keep coding!