Learn TypeScript

Creating union types

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:

type A_or_B_or_C = A | B | C;

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

TypeScriptOpen 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:
age = null;
age = 30;
🤔

Is the TypeScript type checker okay with these values?

  • Try assigning a string to age:
age = "30";
🤔

Is the TypeScript type checker okay with assigning age to a string? If not, why?

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

🤔

How could we change the type of age so that it can be undefined as well as a number or null?

  • Make this change to the age declaration and try assigning a undefined to it:
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.

🤔

What would the string literal union type be to represent the name of a fruit where it can only be Banana, Apple, or Pear? Call the type Fruit

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:
let fruit: Fruit;
fruit = "Apple";
fruit = "pear";
fruit = "strawberry";
🤔

Is the TypeScript type checker okay with these assignments? If not, which ones raise errors and why?

Object union types

Objects can be unioned together as well. For example:

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:
const loadingAction: Actions = { type: "loading" };
🤔

Is the TypeScript type checker okay with this assignment? If not, what is the problem?

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.

Did you find this lesson useful?

Share this lesson on twitter
© 2020 Carl Rippon
Privacy Policy
This site uses cookies. Click here to find out more