TypeScript Union and Intersection Types: Explained in Detail with Important Information

TypeScript, a statically typed superset of JavaScript, introduces powerful type systems that help developers catch errors at compile time and build robust applications. Two critical concepts in TypeScript are Union Types and Intersection Types. These types allow developers to define more flexible and precise type annotations, making the codebase more maintainable and scalable.

Union Types

Union Types allow a variable to hold a value of one or more specified types. It is denoted using the | operator between two or more types.

Syntax:

let value: Type1 | Type2;

Example:

function printId(id: number | string) {
    console.log("Your ID is: " + id);
}

printId(101);  // Valid: id is a number
printId("A101"); // Valid: id is a string

In the above example, id can be either a number or a string. The function printId accepts arguments of either type, allowing flexibility.

Important Info:

• Narrowing: When working with union types, typescript tries to infer the specific type within a conditional block, a technique called type narrowing.

  function printId(id: number | string) {
      if (typeof id === "string") {
          console.log("String id: " + id.toUpperCase());
      } else {
          console.log("Number id: " + id.toFixed(2));
      }
  }
  

• Common Methods and Properties: Only methods and properties common to all types in the union can be safely used on the variable.

  function displayInput(input: string[] | string) {
      input.length; // Allowed: Common property
      // input.push('new item'); // Error: 'push' doesn't exist on type 'string'
  }
  

Intersection Types

Intersection Types create a new type by combining existing types. A value of an intersection type must satisfy all the types involved. Intersection types are denoted using the & operator.

Syntax:

type NewType = Type1 & Type2;

Example:

interface BusinessContact {
    businessEmail: string;
    businessPhone: string;
}

interface PersonalContact {
    personalEmail: string;
    personalPhone: string;
}

type FullContact = BusinessContact & PersonalContact;

const contactDetails: FullContact = {
    businessEmail: "business@example.com",
    businessPhone: "123-456-7890",
    personalEmail: "personal@example.com",
    personalPhone: "098-765-4321"
};

Here, FullContact combines both BusinessContact and PersonalContact. An object of type FullContact must have all the properties defined in the interfaces.

Important Info:

• Combining Specificity: Intersection types are excellent when you need to add additional requirements to an existing type.

  interface User {
      username: string;
      email: string;
  }
  
  interface Admin {
      adminLevel: number;
  }
  
  type AdminUser = User & Admin;
  
  const adminAccount: AdminUser = {
      username: "adminUser",
      email: "admin@example.com",
      adminLevel: 5
  };
  

• Avoiding Conflicts: If the types being intersected contain conflicting properties of different types, TypeScript will produce an error, preventing invalid combinations.

  interface Vehicle {
      model: string;
      color: string;
  }
  
  interface Car {
      model: number; // Error: Property 'model' has incompatible types
      horsepower: number;
  }
  
  type CarInfo = Vehicle & Car; // Error due to conflicting types for `model`
  

Use Cases

Union Types are useful when you expect a function parameter or a variable to accept multiple types, especially when dealing with APIs that may return different data shapes based on various conditions.

Intersection Types allow you to create complex type structures and extend existing interfaces with additional constraints or functionalities, promoting code reuse and consistency.

Summary

Understanding and effectively utilizing Union Types and Intersection Types in TypeScript significantly enhances your ability to write clean, efficient, and type-safe code. These features not only make your code more reliable but also improve maintainability and scalability by enforcing type constraints at compile time. Always remember to leverage type narrowing with union types and avoid conflicts when combining types with intersection types.

By mastering these advanced type constructs, you'll harness the full power of TypeScript's static type system to build robust and error-resistant applications.

Examples, Set Route and Run the Application: Data Flow with TypeScript Union and Intersection Types

Introduction to TypeScript Union and Intersection Types

TypeScript, a statically typed language that builds on JavaScript, introduces advanced type system features to enhance productivity and reliability in development. Among these features are union and intersection types. Union types allow a value to be one of several types, while intersection types combine multiple types into one, making your types more flexible and expressive.

This guide will walk you through a practical example of setting up a route in an application, running the application, and understanding the data flow using TypeScript union and intersection types. We'll assume you're using Node.js with Express for handling HTTP requests.

Step-by-Step Guide

Step 1: Setting Up Your Project

First, create a new directory for your project and set up a basic Node.js application:

mkdir ts-union-intersection-example
cd ts-union-intersection-example
npm init -y
npm install express @types/express typescript ts-node @types/node
npx tsc --init

• express is a web framework for Node.js.
• @types/express provides TypeScript type definitions for Express.
• typescript and ts-node enable writing code in TypeScript and executing it directly.
• @types/node provides TypeScript definitions for Node.js APIs.
• tsc --init generates a base tsconfig.json file, which is configured to compile TypeScript files.

Step 2: Writing TypeScript Code

Now, let's dive into the union and intersection types with a simple HTTP request handling example.

In this application, we will receive different types of user information on an endpoint (/userinfo) that can be either a Student or Employee. We will use union types to handle this situation. Additionally, we will use intersection types to define a DetailedUserInfo type that extends both UserContact and UserPreferences.

Create a TypeScript file named app.ts.

// app.ts

import express, { Request, Response } from 'express';

// Define types
type Student = {
    role: 'student';
    studentId: string;
    course: string;
};

type Employee = {
    role: 'employee';
    employeeId: string;
    department: string;
};

type UserContact = {
    email: string;
    phone?: string;
};

type UserPreferences = {
    theme?: 'dark' | 'light';
    notificationsEnabled?: boolean;
};

// Union Type Example: UserInfo can be either Student or Employee
type UserInfo = Student | Employee;

// Intersection Type Example: DetailedUserInfo combines both UserContact and UserPreferences
type DetailedUserInfo = UserInfo & UserContact & UserPreferences;

const app = express();
app.use(express.json());

// Endpoint to handle user info
app.post('/userinfo', (req: Request, res: Response) => {
    const userInput: DetailedUserInfo = req.body;

    // Type guard to check if user is a student
    if (userInput.role === 'student') {
        console.log(`Received student info: ${userInput.studentId} - ${userInput.course}`);
    }
    // Type guard to check if user is an employee
    else if (userInput.role === 'employee') {
        console.log(`Received employee info: ${userInput.employeeId} - ${userInput.department}`);
    }

    // Logging contact info and preferences
    console.log(`Contact info: Email=${userInput.email}, Phone=${userInput.phone}`);
    console.log(`Preferences: Theme=${userInput.theme}, Notifications Enabled=${userInput.notificationsEnabled}`);

    res.send('User info received');
});

// Start server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

Step 3: Running the Application

Now that we have our server-side logic ready, we need to run the application. Open your terminal, navigate to your project directory, and use ts-node to execute your app.ts file:

npx ts-node app.ts

You should see the following output:

Server is running on port 3000

The TypeScript server is now up and running on port 3000.

Step 4: Testing the Endpoint

To test the /userinfo endpoint, you can use tools like Postman, curl, or any other HTTP client. Here's how you might send a POST request with JSON payload using curl:

# Example for sending a Student object
curl -X POST http://localhost:3000/userinfo \
-H "Content-Type: application/json" \
-d '{
    "role": "student",
    "studentId": "S12345",
    "course": "Computer Science",
    "email": "student@example.com",
    "theme": "dark"
}'

# Example response from the server:
# Received student info: S12345 - Computer Science
# Contact info: Email=student@example.com, Phone=undefined
# Preferences: Theme=dark, Notifications Enabled=undefined

If you want to test with an Employee object, simply adjust the JSON payload accordingly:

# Example for sending an Employee object
curl -X POST http://localhost:3000/userinfo \
-H "Content-Type: application/json" \
-d '{
    "role": "employee",
    "employeeId": "E67890",
    "department": "IT",
    "email": "employee@example.com",
    "phone": "+123456789",
    "notificationsEnabled": true
}'

# Example response from the server:
# Received employee info: E67890 - IT
# Contact info: Email=employee@example.com, Phone=+123456789
# Preferences: Theme=undefined, Notifications Enabled=true

As demonstrated in the examples above, the TypeScript server correctly identifies and processes the role property in the DetailedUserInfo object to determine whether the payload represents a Student or Employee. It also logs detailed user contact and preference information.

Understanding Data Flow

The data flow in this application works as follows:

1. Request: A client sends an HTTP POST request to the /userinfo endpoint with a JSON payload representing either a Student or Employee object, along with some optional contact and preference details.
2. Parsing: The Express middleware express.json() parses the request body as a JSON object.
3. Type Assertion: The parsed request body is asserted as DetailedUserInfo, which is a combination of UserInfo (either Student or Employee), UserContact, and UserPreferences.
4. Type Guarding: The server uses type guards (if statements checking the role property) to determine the specific type of user (either Student or Employee) and processes the data accordingly.
5. Logging: Relevant user information is logged to the console, including contact details and preferences.
6. Response: The server sends a simple response back to the client indicating that the user information has been received.

Conclusion

This example illustrates how TypeScript union and intersection types provide powerful tools for handling more complex and dynamic data structures in an application. By leveraging these features, developers can build robust systems that are easier to maintain and less prone to errors due to type-related issues. With the steps outlined in this guide, you should now have a good foundation for incorporating union and intersection types into your TypeScript projects.

Certainly! Here’s a comprehensive guide to the top 10 questions about TypeScript's Union and Intersection types, with detailed answers.

1. What are Union Types in TypeScript?

Answer:
Union types allow you to define a variable, function parameter, or return value that can be one of several types. Essentially, a union type combines multiple types using the pipe (|) symbol.

Example:

let code: string | number;
code = 5;     // Valid
code = 'ts';  // Also valid

function printCode(code: string | number): void {
    console.log(`Code is ${code}`);
}

The variable code can either be a string or a number. The function printCode can accept an argument that is either a string or a number.

2. What are Intersection Types in TypeScript?

Answer:
Intersection types enable you to combine multiple types into a single type. It creates a new type that includes all features from its constituent types. Intersection types are denoted by the ampersand (&) symbol.

Example:

interface Employee {
    employeeId: number;
    name: string;
}

interface Manager {
    managerId: number;
    department: string;
}

type ManagerEmployee = Employee & Manager;

const john: ManagerEmployee = {
    employeeId: 1,
    managerId: 2,
    name: 'John Doe',
    department: 'Engineering'
};

The ManagerEmployee type is an intersection of Employee and Manager, which means it must have both interfaces' properties.

3. How do Union Types work with functions?

Answer:
Union types within functions provide flexibility to handle different types in a single function. To effectively handle multiple types, you might use type guards to specify the type before performing type-specific operations.

Example:

function formatInput(value: string | number) {
    if (typeof value === 'string') {
        return value.toLowerCase();
    } else if (typeof value === 'number') {
        return value.toFixed(2);
    }
}

console.log(formatInput('Hello'));  // Output: hello
console.log(formatInput(50));       // Output: 50.00

Here, formatInput checks the type and applies relevant methods (toLowerCase for strings and toFixed for numbers).

4. When would you use Union Types over Intersection Types in TypeScript?

Answer:

• Union Types: Use when a single variable or parameter needs to hold values of either of the types. This is typical in scenarios where you might get data in one of several formats.
• Intersection Types: Use when a variable or parameter requires all properties from multiple types simultaneously. Commonly found when extending classes or combining objects to enrich their structure.

Example Scenario:

// Union Type
type Command = 'start' | 'stop' | 'pause';

// Intersection Types
interface Audio {
    play(): void;
    stop(): void;
}

interface Visual {
    show(): void;
    hide(): void;
}

type AudioVisualMedia = Audio & Visual;

class TV implements AudioVisualMedia {
    play(): void { /* Implementation */ }
    stop(): void { /* Implementation */ } 
    show(): void { /* Implementation */ } 
    hide(): void { /* Implementation */ } 
}

Simpler control for different commands vs. ensuring full capabilities for a media device.

5. Can Union and Intersection Types include primitive and object types together?

Answer:
Yes, Union and Intersection Types can mix primitive types and object types. In unions, different types can be separated by the pipe symbol (|), whereas in intersections, multiple types are combined with the ampersand symbol (&).

Example:

// Union Type
let multiType: string | boolean | { prop: string };

multiType = 'test';          // Valid
multiType = true;            // Valid
multiType = { prop: 'data' }; // Valid

// Intersection Type
interface User {
    username: string;
}

type DetailedUser = User & { age: number, email: string };

const user: DetailedUser = {
    username: 'jdoe',
    age: 28,
    email: 'jdoe@example.com'
};

6. How does TypeScript handle type inference in Union and Intersection Types?

Answer:
Union Types: When you assign a value to a variable of a union type, TypeScript infers the narrower possible type based on the current assignment. However, it will still enforce type restrictions at compile time.

Example:

let result: string | number;

result = 'hello'; // Here, TypeScript infers `result` as `string`
result.toUpperCase(); // No error because `result` is currently a `string`

result = 100; // Now, TypeScript infers `result` as `number`
result.toUpperCase(); // Error: Property 'toUpperCase' does not exist on type 'number'

Intersection Types: TypeScript automatically infers the combined structure of the intersected types. However, complex intersections might require you to explicitly use type assertions.

Example:

interface Address {
    street: string;
    city: string;
}

type DetailedPerson = Person & Address;

const personDetail: DetailedPerson = {
    firstName: 'Jane',
    lastName: 'Doe',
    street: 'Some Streeet',
    city: 'Wonderland'
} as DetailedPerson;
// TypeScript infers the presence of both Person and Address properties

7. What is the difference between Union Types and Tuple Types in TypeScript?

Answer:

• Union Types: Represent a value that could be any one of several specified types.
• Tuple Types: Represent arrays with fixed-size elements, where each element has a specific type.

Example:

// Union Type
let status: 'active' | 'inactive' | 'pending';
status = 'active'; // Valid

// Tuple Type
let coordinates: [number, number];
coordinates = [40, -122]; // Valid
coordinates = ['a', 122]; // Error: Type 'string' is not assignable to type 'number'

let userPair: [Person, DetailedPerson]; // Assuming Person and DetailedPerson interfaces exist
userPair = [{ firstName: 'Bob', lastName: 'Smith'}, {firstName: 'Alice', lastName: 'Johnson', age: 30, email: 'alice@test.com'}];

Schematically, unions offer broader type possibilities, while tuples ensure strict positional type conformity.

8. How do you narrow down Union Types in TypeScript?

Answer:
To narrow down a value of a union type in TypeScript, you typically use type guards—statements that check your types at runtime. Common type guards include:

• typeof checks the type of primitive values.
• instanceof checks the type of instances.
• Custom guard functions return a boolean indicating whether the input is a certain type.

Example Using typeof:

function processInput(input: string | number | boolean) {
    if (typeof input === 'string') {
        console.log(`String received: ${input.toLowerCase()}`);
    } else if (typeof input === 'number') {
        console.log(`Number received: ${input.toFixed(2)}`);
    } else {
        console.log(`Boolean received: ${input ? 'true' : 'false'}`);
    }
}

processInput('Hello');   // Output: String received: hello
processInput(10);        // Output: Number received: 10.00
processInput(true);      // Output: Boolean received: true

Using Custom Guard Function:

interface Dog {
    type: 'dog';
    bark: () => void;
}

interface Cat {
    type: 'cat';
    meow: () => void;
}

type Animal = Dog | Cat;

function isDog(animal: Animal): animal is Dog {
    return animal.type === 'dog';
}

function interactWithAnimal(animal: Animal) {
    if (isDog(animal)) {
        animal.bark(); // Since `isDog` returns true, `animal` is inferred as `Dog`
    } else {
        animal.meow(); // If not a `Dog`, `animal` is inferred as `Cat`
    }
}

Custom guard functions enhance readability and reusability.

9. Are there performance implications when using Union and Intersection Types?

Answer:
TypeScript uses static type checking during compilation, so there are no direct runtime performance impacts caused by union or intersection types. They add complexity to the compilation process but do not affect the resulting JavaScript's execution efficiency.

However, misuse or overly complex type combinations may lead to longer compilation times. Generally, modern compilers efficiently handle these type constructs.

Example:

let simpleUnion: string | number;
// No significant performance impact on the compiled JS

type VeryComplexUnion = 
    (string | number | boolean | object | null | undefined) &
    { id: number; createdAt?: Date } &
    ({ status: 'active' } | { status: 'inactive' });

function complexFunction(input: VeryComplexUnion): void {
    // Complex compile-time checks, no runtime impact
}

Complex type combinations can make the source code harder to understand and maintain, indirectly affecting developer productivity more than runtime performance.

10. How do Union and Intersection Types help achieve cleaner and more maintainable code?

Answer:
Union and Intersection Types contribute significantly to writing cleaner and more maintainable code through:

• Clear Intent: Descriptive types make code intent clearer. For example, a Union Type like status: 'active' | 'inactive' | 'pending' communicates possible states explicitly.
• Error Reduction: Compile-time checks catch errors early. For instance, TypeScript will prevent calling methods only available on specific types without proper type guards.
• Reusability: Interfaces and types can be reused across different parts of the codebase, reducing duplication.
• Expressiveness: Intersection Types allow you to build richer types by combining existing ones, enhancing expressiveness.

Example Scenario: Suppose you're developing an application with different user roles (Admin, Guest, Member) each having common and unique attributes.

Without Union and Intersection:

function handleUserAccess(user: { admin?: true; id?: number; permissions?: ['create', 'delete']; guestId?: number; memberId?: number }): void {
    if (user.permissions && user.permissions.includes('delete')) {
        // Assuming Admin has this permission
    } else if (user.memberId) {
        // Member-specific logic
    } else if (user.guestId) {
        // Guest-specific logic
    }
}
// Hard to read, error-prone without additional checks, and not scalable

With Union and Intersection:

interface CommonUserData {
    id: number;
    name: string;
}

interface Admin extends CommonUserData {
    type: 'admin';
    permissions: ['create', 'read', 'update', 'delete'];
}

interface Guest extends CommonUserData {
    type: 'guest';
    guestId: number;
}

interface Member extends CommonUserData {
    type: 'member';
    points: number;
}

type User = Admin | Guest | Member;

function handleUserAccess(user: User): void {
    switch (user.type) {
        case 'admin':
            if (user.permissions.includes('delete')) {
                // Admin-specific logic
            }
            break;
        case 'member':
            // Member-specific logic
            break;
        case 'guest':
            // Guest-specific logic
            break;
    }
}

This approach clearly defines each user role, promotes scalability, and reduces potential runtime errors.

---

Understanding and appropriately using Union and Intersection Types in TypeScript can greatly enhance your development experience, leading to more robust, readable, and maintainable codebases.