Creating union types

In this lesson, we'll learn what a union type is, how to create them, and some cases where they are useful.

Understanding a union type

As the name suggests, union types are types that we can combine to form a new type. A union type is constructed from existing types using the pipe (|) character:

Copy
type A_or_B_or_C = A | B | C;

Let's go through an example to make this clearer:

Open exercise in CodeSandbox

The code contains an age variable with a union type annotation. The type can hold a value that can be null or numeric.

• Let's assign age to some values, after the declaration, before the console.log statement:

Copy
age = null;
age = 30;

• Try assigning a string to age:

Copy
age = "30";

Unioning a type with null is a really common use case because data can often be null or a specific type.

• Make this change to the age declaration and try assigning a undefined to it:

Copy
age = undefined;

The TypeScript type checker is perfectly happy with this.

We can assign a union type to a type alias so that it is reusable.

• Create a type alias called Age for our union type.

• Add this Age type alias to our code and use it in the age declaration.

That's pretty cool!

String literal union types

Specific string values can be unioned together to form what is called string literal union types.

String literal union types are beneficial when you want a more specific and narrower type than string.

• Add this Fruit union type to our code and assign the following values to a variable of this type:

Copy
let fruit: Fruit;
fruit = "Apple";
fruit = "pear";
fruit = "strawberry";

Object union types

Objects can be unioned together as well. For example:

Copy
type Actions = { type: "loading" } | { type: "loaded"; data: { name: string } };

• Add this Actions union type to our code and assign the following value to a variable of this type:

Copy
const loadingAction: Actions = { type: "loading" };

String literal unions v string enums

String literal unions are like string enums in that they create a narrow type of specific strings. If the strings are meaningful and don't need to be mapped to something more meaningful, then a string literal union is a concise way of creating the type. String enums are useful when the meaning of string value isn't apparent because it can be given a meaningful name to help the readability of the code.

Summary

The union type is a way to create useful types from existing types. If a type can be something or something else, then a union type can represent that type.

String literal unions are a way of creating narrower typed strings than a plain string. Unioning with null or undefined is a neat way to handle data with a specific type but could be empty.

Excellent - we are getting to grips with creating more advanced types now!

In the next section, we will learn about a slightly different way of combining existing types to construct a new type.