Union Types
This lesson covers values that may be one of several types. You will see how the concept fits into everyday TypeScript and why it matters for reliable applications.
Union Types Overview
Union Types is a core part of the TypeScript type system. Understanding it helps you model data accurately, catch mistakes early, and communicate intent to teammates through types.
We focus on practical patterns you will use in real codebases—not abstract theory. Examples mirror common frontend, backend, and library scenarios.
| Topic | Pattern | Why it matters |
| Core idea | values that may be one of several types | Foundation for typed code |
| Syntax | string | number | Common pattern in real projects |
| Compiler | Checked at build time | Errors caught before deploy |
| Runtime | Erased to JavaScript | No type overhead in production |
| Tooling | IDE autocomplete | Faster refactors and reviews |
Union Types Example
type Id = string | number;
function printId(id: Id) {
if (typeof id === "string") console.log(id.toUpperCase());
else console.log(id.toFixed(0));
}
Unions model alternates; narrow before using type-specific APIs.
When to Use Union Types
| Use Union Types | Prefer Single Type |
| API status codes or result variants | Homogeneous numeric calculations |
| string | number IDs | Always-string identifiers |
| Nullable references (T | null) | Guaranteed non-null internal state |
| Theme or role enumerations | Open-ended user-generated text |
| Error | Success results | Simple boolean flags |
Best Practices
- Use union types to document intent at API boundaries
- Prefer inference for local variables when types are obvious
- Enable strict compiler options to maximize checking
- Name types clearly with domain language, not abbreviations
- Combine with narrowing when working with union types
- Review compiler errors instead of silencing with any
- Keep examples small and composable in production code
Common Mistakes to Avoid
- Over-annotating when inference already suffices
- Using type assertions instead of proper narrowing
- Applying patterns without understanding runtime behavior
- Ignoring null and undefined in strict mode
- Duplicating types instead of reusing aliases or interfaces
- Expecting types to validate external JSON automatically
- Mixing incompatible module settings with bundler output
Key Takeaways
- Union Types strengthens contracts in TypeScript code
- Types are erased at compile time—validate external data separately
- Combine with interfaces, unions, and generics as needed
- Strict mode surfaces more issues during development
- Good naming makes complex types self-documenting
- Next: explore Literal Types to continue the course
Pro Tip
When learning union types, recreate the example in the TypeScript Playground and break it on purpose to read compiler errors—they teach the rules quickly.