Understanding TypeScript Union Types: A Comprehensive Guide

TypeScript is a popular programming language that brings many benefits to JavaScript developers, including the ability to use union types. Union types are a powerful feature that allows developers to create variables that can hold multiple types of values. In this article, we’ll take a closer look at TypeScript union types, exploring their features, benefits, and use cases.

What are Union Types?

A union type is a type that represents a variable that can hold one of several possible types. For example, suppose you have a function that can accept a string or a number as an argument:

typescriptCopy codefunction printValue(value: string | number) {
  console.log(value);
}

In this example, value can hold either a string or a number type. This is useful when you need a variable to hold multiple types of values.

Union types are denoted using the | (pipe) symbol. You can use as many | symbols as you need to create a union of multiple types.

Union Types with Interfaces

Union types can also be used in combination with interfaces. For example, suppose you have an interface that describes a person with either a name or age property:

typescriptCopy codeinterface Person {
  name: string;
  age: number;
}

You can make the name and age properties optional by using union types:

typescriptCopy codeinterface Person {
  name?: string;
  age?: number;
}

In this example, the name and age properties are optional and can hold either a string or a number type.

Union Types with Type Aliases

Union types can also be defined using type aliases. Type aliases are a way to create a new name for an existing type. For example, suppose you have a union type that represents a string or a number:

typescriptCopy codetype StringOrNumber = string | number;

In this example, StringOrNumber is a type alias that represents a union type of string or number. You can use StringOrNumber anywhere you would use a regular string or number type.

Union Types with Generics

Union types can also be used in combination with generics. Generics are a way to create reusable code that can work with a variety of types. For example, suppose you have a function that returns either a string or a number:

rCopy codefunction getValue<T>(value: T): T {
  return value;
}

In this example, the getValue function is a generic function that can accept any type of argument and return the same type of argument. You can use this function with union types:

typescriptCopy codeconst stringValue = getValue<string>("hello");
const numberValue = getValue<number>(42);
const unionValue = getValue<string | number>("hello");

In this example, stringValue is of type string, numberValue is of type number, and unionValue is of type string | number.

Conclusion

Union types are a powerful feature of TypeScript that allow developers to create variables that can hold multiple types of values. Union types can be used with interfaces, type aliases, and generics to create reusable and flexible code. If you’re new to TypeScript or just getting started with union types, be sure to take the time to explore this powerful feature!