What Are Union Types In TypeScript?

Tim Mouskhelichvili
Tim Mouskhelichvili
• 3 minutes to read

TypeScript offers multiple types to compose existing types into new ones, such as the intersection type or the union type.

The union type allows a developer to use more than one data type as a parameter or a variable.

This article will explain union types in TypeScript and give real-life code examples to understand this feature better.

Let's get to it 😎.

The definition

The union type lets a value be of more than one type.

To represent a union type, use the pipe | symbol.

Here is the syntax of a union type in TypeScript:

typescriptlet variable: string | number | boolean;

Let's go through some examples to understand this better.

typescriptlet obj: string | number;

obj = 2805;  // OK
obj = "Tim"; // OK
obj = {};    // Not OK
obj = false; // Not OK

The obj variable only accepts strings or numbers as an argument in this example. That's why it gives a compiler error when you try to assign a non-supported data type to it.

You can also use union types with function agruments:

typescriptconst output = (param: number | string): void => {
    console.log(param);
};

output(2805);  // OK
output('Tim'); // OK
output(true);  // Not OK

As you can see, this function accepts a parameter that can be either a number or a string.

When you try to call it with something else, it outputs a TypeScript compiler error.

Union of literal types

Also, TypeScript allows the creation of union types of literals, such as:

  • String literal
  • Number literal
  • Boolean literal

Here is an example of a union of string literals:

typescripttype Animal = 'dog' | 'cat' | 'cow';

In this example, we create a new type that only accepts a limited set of string values.

The best Web Development course in 2023! 👉 Learn Web Development

Union type vs enums

As you may have noticed, the union type and the enum are similar.

The most significant differences between union types and enums are:

  • Union types are a compile-time concept. They are not outputted in the final JavaScript.
  • Enums are transpiled to JavaScript.
  • You can iterate over an enum, but not the union type.
  • You can use an enum as a bit flag.
  • Enums are less type-safe than union types.
  • Enums can have redundant declarations.

How to check a type against a union type?

To check a type against a union type, you need to know more about the object you are checking.

For example, if an object contains a specific property or function, you can check for it to determine the correct object type.

Here is an example of this:

typescriptinterface IDog {
    bark: () => void;
}

interface ICat {
    meow: () => void;
}

const buy = (animal: IDog | ICat): void => {
    if ('meow' in animal) {
        console.log('cat');
    } else {
        console.log('dog');
    }
}

Since only the cat contains the meowing function, you can check for its existence to determine the animal's type.

Read more: How do interfaces work in TypeScript?

Final thoughts

As you can see, TypeScript union types are helpful when a developer needs a variable to accept more than one data type.

Union types are different from enums because they only exist at compile-time.

typescript union types

Thank you for reading this article.

Here are other TypeScript tutorials for you to enjoy:

The best Web Development course in 2023! 👉 Learn Web Development

Comments (0)
Reply to: