TypeScript Tricks

Type System

TS Union Types

Using Union Types

TypeScript union types allow multiple types with | operator.

Introduction to Union Types

In TypeScript, union types allow you to specify that a variable can hold more than one type. This is done using the | operator. Union types are particularly useful when working with functions or variables that can accept multiple types, enhancing flexibility while maintaining type safety.

Syntax of Union Types

The syntax for declaring a union type is straightforward. Use the | symbol to separate different types that a variable can accept. For example, number | string indicates that a variable can be either a number or a string.

Using Union Types in Functions

Union types are extremely useful in functions when you want to accept arguments of multiple types. Consider a function that processes values that can be either a number or a string.

Narrowing Union Types

While union types provide flexibility, you often need to determine the exact type of a variable at runtime. This process is known as type narrowing. TypeScript provides several ways to narrow down union types, such as using type guards.

Common Use Cases for Union Types

Union types are commonly used in scenarios where a value can logically be of multiple types. This includes:

  • API responses: Handling responses that can return different data structures.
  • Event handling: Defining event handlers that can accept different event objects.
  • Form inputs: Managing form fields that can accept diverse data formats.

Type System

Next
Intersection Types