Mastering TypeScript Union Types: Comprehensive Guide with Examples

Title: Mastering TypeScript Union Types: Comprehensive Guide with Examples

Introduction to TypeScript Union Types: TypeScript's union types provide a powerful mechanism to work with variables that can hold values of multiple data types. This flexibility enhances code robustness and allows developers to handle a wider range of scenarios. In this tutorial, we'll dive deep into TypeScript union types, exploring their concepts, usage, and providing practical examples for a thorough understanding.

Table of Contents:

1. Understanding TypeScript Union Types: Union types enable variables to accept values of multiple data types, providing increased flexibility in programming.

2. Declaring Union Types:

   • Defining a Union Type: Combine two or more data types using the pipe | symbol to declare a union type.

     let value: string | number;

3. Using Union Types:

   • Type Checking and Autocompletion: Leverage the benefits of union types for type checking and autocompletion.

     function displayValue(input: string | number) { console.log(input); }

4. Type Guards:

   • typeof Type Guard: Use the typeof operator to narrow down possible types within a union.

     function processValue(input: string | number)
     { 
     if (typeof input === "string") 
     { 
           console.log("String value:", input);
     } else { 
            console.log("Number value:", input); 
     } 
     }

   • User-Defined Type Guard: Create custom type guards using user-defined functions.

     function isString(input: string | number): input is string {
      return typeof input === "string"; 
     }

5. Using Union Types with Interfaces:

   • Defining Interfaces with Union Properties: Combine union types with interfaces for versatile property definitions.

     interface Status { 
     code: number; 
     message: string | null; 
     }

6. Discriminated Unions:

   • Discriminant Property: Employ a common property to determine the specific type within a union.

     interface Circle { 
     kind: "circle"; 
     radius: number; 
     } 
     interface Rectangle {
      kind: "rectangle"; 
     width: number; 
     height: number; 
     } 
     type Shape = Circle | Rectangle;

Conclusion: Mastering TypeScript union types empowers developers to create more flexible and adaptable code that can handle diverse scenarios. By understanding how to declare union types, utilize them effectively with type guards, and apply them within interfaces and discriminated unions, you'll enhance your TypeScript skills and ability to build robust applications. The practical examples and comprehensive explanations provided in this guide will equip you to leverage union types for creating versatile and type-safe code.