Bugl — code interview practice that feels like a game

Loading lesson path

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind TypeScript Union Types?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___ printStatusCode(code: string | number) {

3Order

Put the learning moves in the order that makes the concept easiest to apply.

Such as when a property would be string or number .

Union types are used when a value can be more than a single type.

TypeScript Union Types

Union types are used when a value can be more than a single type.

Such as when a property would be string or number .

Union | (OR)

Using the | we are saying our parameter is a string or number :

Example

function printStatusCode(code: string | number) {
  console.log(`My status code is ${code}.`)
}
printStatusCode(404);
printStatusCode('404');

Union Type Errors

Note

you need to know what your type is when union types are being used to avoid type errors:

Example

function printStatusCode(code: string | number) {
  console.log(`My status code is ${code.toUpperCase()}.`) // error: Property 'toUpperCase' does not exist on type 'string | number'. Property 'toUpperCase' does not exist on type 'number'
}