Lesson 12 of 2352%

(Progress persistence is disabled until Phase 9)

TypeScript
Advanced
25 min

Union Types

Allow multiple types.

Learning Objectives

  • The | operator

Union Types

Welcome to this lesson on Union Types. TypeScript builds on JavaScript by adding static typing, and mastering union types will help you build highly robust applications.

Explanation

TypeScript code is transformed into JavaScript via a compiler (or transpiler) before it runs in the browser. The types you write exist strictly at development time to help you catch errors early.

Code Examples

Here is how you might write this in TypeScript:

  console.log("Your ID is: " + id);
}\n```

### Practical Example

To truly master this, try defining types for the data structures you use every day. It will instantly highlight edge cases you may have missed.

<Callout type="note">
**Note:** The BrowserCode Playground does not yet support native TypeScript execution. This feature is coming in a future phase!
</Callout>

### Try It Yourself

You can open the playground to see the code, but note that execution is currently restricted.

<TryItButton />

### Key Takeaways
- TypeScript catches errors before they happen.
- Types are erased when compiled to JavaScript.

Lesson Progress

Practice This TopicTake QuizBuild a TypeScript Project

Ready to practise?

Apply what you learned with a hands-on challenge.

Practise This Topic