Description

Login

Syncing account progress…

Back

Beginner · 10 min

Unions and narrowing

Handle each allowed kind of value before using its specific operations.

Allow more than one type

A union means a value may have any one of the listed types. Before using an operation that belongs to only one member, narrow the value with a runtime check.

function show(id: string | number): string {
  return typeof id === "string" ? id.toUpperCase() : id.toFixed(0);
}
console.log(show("ab"));

Output

AB

Check before using

TypeScript follows control flow after a typeof check. This makes operations available in the branch where they are valid. The check also runs in JavaScript.

function double(value: string | number): number {
  if (typeof value === "string") return Number(value) * 2;
  return value * 2;
}
console.log(double("4"));

Output

8

Put it into practice

  1. Read the types and predict the output before running the examples.
  2. Complete the task, then check your understanding with the practice questions.

Try it yourself

Code runs on this device. When you are signed in, drafts sync to your account.

Narrow before uppercasing

Make "format" uppercase a string and convert a number with String(). Display the result for 7.

Practice