Union Types in TypeScript

In the TypeScript type system, Union Types are a data structure that allows variables to hold multiple possible values. They combine two or more primitive types using the | operator to form a composite type capable of representing any one of those constituent types. For example, declaring type Color = 'red' | 'green'; indicates that a variable of this type can be either the string 'red' or 'green'. Union Types are one of the core mechanisms behind TypeScript's implementation of strong static checking; they enable the compiler to verify code logic correctness at compile time, thereby avoiding many common errors during runtime.
Defining a union type is simple and intuitive. You simply connect the types you wish to combine using the | symbol. TypeScript supports unions for various types, including primitive data types (such as strings and numbers), enum values, and custom interfaces or class instances. For example:

• Multi-element Arrays: A declaration like type Point = { x: number } | { y: number }; indicates that an object either contains the x property or the y property.
• Mixed Function Parameter Types: In function definitions, union types can be used to accept inputs of different types, such as (a: string) => void | (b: number) => void; (note that in actual usage, other constraints should be applied alongside this to ensure logical clarity).

This declaration style is not only concise but also significantly enhances code readability. Compared to using any or ignoring type checking, explicitly listing all possible values allows developers to clearly understand under what circumstances a variable will assume a specific state.

Compile-Time Behavior of Union Types and Branch Handling

When the TypeScript compiler encounters conditional statements (such as if-else) containing union types, it performs "Control Flow Narrowing". This means that once code enters a specific branch, the originally broad union type is narrowed down to a more concrete single type. This is one of the key features for leveraging union types to achieve strong typing programming.

For example, suppose we have a variable color defined as 'red' | 'green' | 'blue';:

let color: string = 'red'; // Initial state can be any color string (if not explicitly initialized) or a value conforming to the union type

if (color === 'red') {
    // In this branch, the compiler infers that the type of color is strictly "string" and known to be "red"
    console.log(color.length); 
} else if (color === 'green' || color === 'blue') {
    // In this branch, the compiler knows color is either 'green' or 'blue'
    // If subsequent logic needs to distinguish between green and blue, conditions can be further split
}

Through this mechanism, developers do not need to write extensive switch-case statements to judge types one by one; the compiler automatically handles the process of refining types.

Application Examples of Union Types in Function Parameters

In practical development, union types are frequently used to define flexible function signatures or interface structures, especially when compatibility with multiple input formats is required. For instance, a data processing function might accept both user objects and configuration objects as parameters:

interface User { id: number; name: string }
interface Config { key: string; value: boolean }

function process(data: User | Config) {
    // TypeScript enforces that the passed-in data must be either a User or a Config instance
}

When calling process within the function, it is mandatory to ensure that the argument strictly conforms to the above union type definition. If an object containing illegal properties (e.g., { id: 'not a number' }) is attempted to be passed, the compiler will directly report an error, thereby preventing potential type errors from entering production environments.

Interaction with Other Advanced Types and Precautions

Although union types are very powerful, it is important to note their interaction with generics, optional properties, and nullish coalescing operators in practical applications. When a union type includes null or undefined (e.g., 'red' | null), the compiler adjusts its processing logic accordingly; this is often used to simulate scenarios where data might be missing. Additionally, when dealing with generic functions, if the parameter type is a union type, inference of the generic parameters may become complex, requiring developers to manually specify concrete type parameters to ensure code intent remains clear.

In summary, mastering Union Types forms the foundation for deeply understanding the TypeScript type system. It endows the language with powerful expressive capabilities and strict constraint enforcement, helping developers maintain high levels of type safety and logical rigor when building large-scale applications.