Union types

Learn union, specifying one of several types.

What is a union type?

A union type states that a value can be one of several types. The types are separated by the | (pipe) sign. For example string | number says the value can be either a string or a number.

let id: string | number;
id = "TS-101";
id = 42;

This is practical when an identifier can appear in both a text and a number form.

Type narrowing

When using a union type, TypeScript needs to know which type it currently is. You narrow the type with typeof to perform the right operations. In each branch only the methods of that branch's type are available.

function printId(id: string | number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id * 2);
  }
}
printId("abc");
printId(5);

Exercise Write a format function with a union

Write a function format(input: string | number): string. Narrow with typeof: if it is a string, return toUpperCase(); if it is a number, return "N-" + input. Print the result of both calls.

Show example solution

function format(input: string | number): string {
  if (typeof input === "string") {
    return input.toUpperCase();
  } else {
    return "N-" + input;
  }
}

console.log(format("hello"));
console.log(format(42));

Test yourself

What does it mean for a variable to have the type string | number?
```
let id: string | number = 42;
```
- The value cannot be any type
- The value can be either string or number
- The value must be both string and number
- The value can only be number
Show answer

The value can be either string or number — A union lets you pick one of the types; the value can be any of the listed types.

Complete the union operator

let id: string ____ = 42;

Show answer

let id: string | number = 42;

Union parts

|

Combines types (or)
typeof id === "string"

Performs narrowing
string | number

An example union type
null | undefined

Combines two absent values

Next lesson: Intersection types

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies