Mastering Complex Unions in TypeScript: A Step-by-Step Guide

Are you tired of wrestling with complex unions in TypeScript? Do you find yourself stuck, unsure of how to narrow down a behemoth of a type to a more manageable size? Fear not, dear developer, for this article is here to guide you through the process of checking only part of a complex union, and emerge victorious in the battle against type chaos!

The Problem: Complex Unions Gone Wild

In TypeScript, unions are a powerful feature that allows us to define a type that can be one of several types. However, as our types become more complex, so do our unions. Before we know it, we’re faced with a union that’s as unwieldy as a mythical hydra – many-headed, and impossible to tame.

  type MyUnion = 
  | { type: 'string', value: string } 
  | { type: 'number', value: number } 
  | { type: 'boolean', value: boolean } 
  | { type: 'object', value: { [key: string]: any } } 
  | { type: 'array', value: any[] } 
  // ...and so on, ad infinitum

As our union grows, our code becomes increasingly difficult to maintain. We find ourselves struggling to narrow down the type to a specific subset, making it hard to perform type-safe operations.

The Solution: Narrowing Down the Complex Union

The good news is that TypeScript provides us with a way to narrow down a complex union by checking only part of it. We can use a combination of type guards, conditional types, and the infer keyword to tame even the most unruly of unions.

Step 1: Identify the Part of the Union You Want to Check

The first step is to identify the specific part of the union you want to check. Let’s say, for example, that we want to narrow down our union to only include objects with a `type` property set to `’string’`.

  type MyUnion = 
  | { type: 'string', value: string } 
  | { type: 'number', value: number } 
  | { type: 'boolean', value: boolean } 
  // ...and so on

Step 2: Create a Type Guard

A type guard is a function that takes a value and returns a type predicate. In our case, we can create a type guard that checks if the `type` property of an object is set to `’string’`.

  function isStringType(value: T): value is T & { type: 'string' } {
    return typeof value.type === 'string' && value.type === 'string';
  }

This type guard takes a value of type `T` and returns a type predicate that asserts that `T` is also an object with a `type` property set to `’string’`.

Step 3: Use the Type Guard to Narrow the Union

Now that we have our type guard, we can use it to narrow down our union. We can create a conditional type that checks if the type guard returns true, and if so, narrows the type to only include objects with a `type` property set to `’string’`.

  type NarrowedUnion = T extends { type: 'string' } ? T : never;

This conditional type takes a type argument `T` and checks if it extends the type `{ type: ‘string’ }`. If it does, then `T` is returned as is. If not, then the type is narrowed to `never`.

Step 4: Use the Narrowed Union in Your Code

Finally, we can use our narrowed union in our code. Let’s say we have a function that takes a value of type `MyUnion` and wants to perform an operation only if the type is set to `’string’`.

  function processValue(value: MyUnion) {
    if (isStringType(value)) {
      // value is now narrowed to { type: 'string', value: string }
      console.log(value.value.toUpperCase());
    } else {
      console.log("Unknown type");
    }
  }

In this example, we use our type guard `isStringType` to check if the `type` property of the `value` object is set to `’string’`. If it is, then the type of `value` is narrowed to `{ type: ‘string’, value: string }`, and we can safely perform the operation `toUpperCase()` on the `value` property.

Advanced Techniques: Using the `infer` Keyword

In some cases, we may want to create a more generic type guard that can work with multiple types. This is where the `infer` keyword comes in.

  type NarrowedUnion = T extends infer U ? U extends { type: 'string' } ? U : never : never;

This conditional type uses the `infer` keyword to create a new type variable `U` that represents the type of `T`. It then checks if `U` extends the type `{ type: ‘string’ }`. If it does, then `U` is returned as is. If not, then the type is narrowed to `never`.

Real-World Example: Parsing JSON Data

Let’s consider a real-world example where we need to parse JSON data using a complex union. Suppose we have a JSON response that can contain different types of data, such as strings, numbers, booleans, objects, and arrays.

  type JSONData = 
  | { type: 'string', value: string } 
  | { type: 'number', value: number } 
  | { type: 'boolean', value: boolean } 
  | { type: 'object', value: { [key: string]: any } } 
  | { type: 'array', value: any[] }

We want to create a function that takes a JSON response and parses it into a usable format. However, we need to narrow down the type of the response to a specific subset based on the `type` property.

  function parseJSON(data: JSONData) {
    if (isStringType(data)) {
      return data.value.toUpperCase();
    } else if (isNumberType(data)) {
      return data.value * 2;
    } else if (isBooleanType(data)) {
      return !data.value;
    } else if (isObjectType(data)) {
      return JSON.stringify(data.value);
    } else if (isArrayType(data)) {
      return data.value.map((item) => item * 2);
    } else {
      throw new Error("Unknown type");
    }
  }

In this example, we use multiple type guards to narrow down the type of the `data` object based on its `type` property. We then use the narrowed type to perform the appropriate operation on the `value` property.

Conclusion

In conclusion, narrowing down a complex union in TypeScript can be a daunting task, but with the right tools and techniques, it can be accomplished with ease. By using type guards, conditional types, and the `infer` keyword, we can create a more maintainable and type-safe codebase.

Remember, the key to taming complex unions is to identify the specific part of the union you want to check, create a type guard to narrow it down, and use the narrowed type in your code. With practice and patience, you’ll become a master of TypeScript unions in no time!

Technique	Description
Type Guards	A function that takes a value and returns a type predicate.
Conditional Types	A type that checks if a condition is true, and if so, returns a specific type.
infer Keyword	A keyword used to create a new type variable that represents the type of another type.

• Type Guards
• Conditional Types
• infer Keyword

I hope this article has been helpful in your journey to master complex unions in TypeScript. Happy coding!

Frequently Asked Question

Get ready to simplify your complex unions in TypeScript with these expert answers!