TypeScript Conditional Types: Filtering Undefined from Union Types

Introduction

TypeScript's type system is incredibly powerful and allows for advanced type manipulations. One common challenge is handling union types that include undefined. In this blog post, we'll explore how to filter undefined from a union type using conditional types, ensuring stricter type safety in our applications.

Understanding Union Types and Conditional Types

Before diving into the example, let's briefly review some TypeScript fundamentals:

Union Types: A union type describes a value that can be one of several types. For example, string | number is a union type that can be either a string or a number.
Conditional Types: Introduced in TypeScript 2.8, conditional types allow for type inference based on a condition. The syntax looks like T extends U ? X : Y, where T is the type being checked, U is the condition, and X and Y are the types returned based on whether T extends U.

Problem Statement

Suppose we have a union type that can be an object or undefined, and we want to create a new type that excludes undefined.

Solution

Let's define our types and see how we can filter out undefined:

type MyType = {
  property: string;
} | undefined;

Here, MyType is a union type that can either be an object with a string property property or undefined.

Next, we want to create a new type DefinedMyType that excludes undefined from MyType. We can achieve this using conditional types:

type DefinedMyType = MyType extends infer T ? T extends undefined ? never : T : never;

Let's break down this type definition:

MyType extends infer T: This part of the condition infers the type T from MyType. In TypeScript, infer is used within conditional types to introduce a new type variable.
T extends undefined ? never : T: This checks if the inferred type T is undefined. If it is, the type resolves to never, effectively removing undefined from the type union. If T is not undefined, it resolves to T.

Example Usage

To see this in action, let's look at some example usage:

const validExample: DefinedMyType = { property: 'example' }; // Valid
const invalidExample: DefinedMyType = undefined; // Error: Type 'undefined' is not assignable to type '{ property: string; }'

In this example:

validExample is correctly typed as an object with a string property property.
invalidExample correctly throws an error because undefined is not assignable to DefinedMyType, which filters out undefined.

Conclusion

By using TypeScript's conditional types, we can create more precise and robust types. Filtering undefined from union types ensures stricter type safety, preventing potential runtime errors. This technique is especially useful in complex applications where type correctness is crucial.

Summary

Union Types allow a value to be one of several types.
Conditional Types enable type inference based on conditions.
Type Filtering can exclude specific types (like undefined) from a union type, enhancing type safety.

Understanding and utilizing these advanced TypeScript features can greatly improve the reliability and maintainability of your code.