Can union types include null or undefined?

Union types are a powerful feature in TypeScript that allow developers to define a variable that can hold multiple types of values. One common question that arises is whether union types can include `null` or `undefined`. Understanding how to effectively use union types with these values is crucial for writing robust TypeScript code.

In TypeScript, both `null` and `undefined` are considered valid types. This means they can be included in union types, allowing for more flexible and expressive type definitions. However, it is essential to understand the implications of including these types in your union definitions.

Including null and undefined in Union Types

When defining a union type, you can explicitly include `null` or `undefined` as part of the type. Here are some examples:

type MaybeString = string | null;
type OptionalNumber = number | undefined;
type NullableValue = string | number | null | undefined;

In the examples above, `MaybeString` can hold either a string or `null`, while `OptionalNumber` can hold a number or `undefined`. The `NullableValue` type can hold a string, number, `null`, or `undefined`, making it very flexible.

Best Practices

• Explicitly Define Nullability: Always be explicit about whether a variable can be `null` or `undefined`. This improves code readability and helps prevent runtime errors.
• Use Non-Nullable Types When Possible: If a variable should never be `null` or `undefined`, use a non-nullable type. This can help catch errors at compile time.
• Leverage Type Guards: When working with union types that include `null` or `undefined`, use type guards to ensure that you handle these cases appropriately.

Common Mistakes

• Assuming Non-Nullable Types: A common mistake is assuming that a variable of a union type will always have a value. Always check for `null` or `undefined` before using the variable.
• Neglecting Type Guards: Failing to implement type guards can lead to runtime errors. Always ensure that you check the type before performing operations on the variable.
• Confusing Null and Undefined: Understand the difference between `null` (an intentional absence of value) and `undefined` (a variable that has been declared but not assigned). This distinction is crucial for proper type handling.

Practical Example

Consider a function that processes user input, which may or may not be provided:

function processInput(input: string | null | undefined) {
    if (input === null) {
        console.log("Input is null");
    } else if (input === undefined) {
        console.log("Input is undefined");
    } else {
        console.log("Processing input: " + input);
    }
}

In this example, the function checks the type of `input` before processing it, ensuring that it handles all possible cases correctly. This approach minimizes the risk of runtime errors and enhances code reliability.

In conclusion, union types in TypeScript can indeed include `null` and `undefined`. By following best practices and avoiding common pitfalls, developers can leverage union types effectively to create safer and more maintainable code.