Master the discriminated unions pattern in TypeScript to enhance your coding skills and streamline complex data handling in your applications.

Discriminated Unions

[00:00] Alright. Let's talk about discriminated unions. We're going to make a type for API responses. And here, the AI is saying, hey. This can be a a series of objects with the the union, here.

[00:12] So we're gonna have a status of loading, status success with data string, and a status of error is a string. Now you could definitely also do type loading state and success state and then union those together. I kinda go back and forth. It kinda depends on the way I'm feeling. And right now, I'm feeling like let's just do it all as as one one long, long thing.

[00:33] I don't mind. Especially with Prettier, the formatter, auto formatting this, I feel like it's relatively readable anyway, so it's fine. So now let's make a function that, has a switch statement on the status. We've got our state. That's our API state.

[00:49] So it's one of those, things. We're gonna check the status. That can either be loading success or error. And, that's the first cool thing about this is that, because each one of these has a status property, it, can union those together and say the status could be one of these three things because that property comes from one of these three things. The interesting thing about this too is if I comment this out and say, now the error state, I don't need a status.

[01:16] We've got status on the other two. I don't need a status on this one. Well, that's gonna be a problem here because now it's saying, hey, one of the things that you're unioning doesn't have a status property, so we can't even check for it. It would be purposeless. There would be no reason to check for it because it doesn't even have a status property.

[01:33] Now, you could, if you had to, you could say if, status in, state, then, you can, do that check. And now it's saying, hey, case error, that doesn't make any sense. So we'd get rid of that and then handle the error case by itself and be kind of a mess. So discriminated unions are are nice, and we're gonna keep that status right there. So in any case, once we end up in, this spot, we know that we're in a loading state, so we can return loading.

[02:00] When we have our status as success, then we know that the state is a success state, and it will have a status of success and data that is an array of strings. So we can call, or or get the length of that array. And then for the error state, we know that the error is gonna be a string. So that works super nicely. Now one other interesting thing about this is it didn't have curly braces.

[02:24] I like to have curly braces on all my states. So I'm gonna add those and we'll let the formatter fix that for me. And then it also doesn't have a break statement on any of these. And the reason for that is because we have a return statement right here. So the the reason this is ghost text is it says it's unreachable code detected, on that break statement.

[02:43] So you don't need to have a break statement if you have a return statement because that's gonna exit the entire function. Not just the switch statement, but the whole thing. So we're gonna, not need to worry about these break statements. And then finally, you don't need a default case in here necessarily because, this is the state now is a never type, because you there's no possible other thing that it could be. It does not exist on type never.

[03:12] State is type never because you could never get into this default case because we're handling all possible states or status values of the state. So we've gone through all three of these, and we know that the API state can't be anything else. Otherwise, we'll get a type error. Let me show you what I mean by that a little bit more clearly right here. So we'll save this.

[03:36] We got all these loading states. If we console dot log, an unknown, state, then here we're going to say status unknown. Unknown is not assignable to any of the other, statuses, so we are not a valid we're not calling this in a valid way. So it's impossible for us to call it wrong. So therefore it's impossible for us to not have covered the default state.

[03:58] So we don't need to cover or have a default state handler. Now, what if we did add another state handler here and we're gonna say status unknown? Okay. Well, now this doesn't have a problem, but we do have a problem because now we're returning undefined. We're not handling that case.

[04:16] And so in that case, we need to add this, additional, state handling. And, sometimes in TypeScript with certain configurations, it will actually warn you of that. We have really loose configuration in this project, for the purposes of making it easy for you to get used to TypeScript. But in actual projects, you'll actually get a warning right right there saying, hey. You need to handle all the cases in, the switch statement, which is quite nice.

[04:44] Okay. And that's the exhaustive checking stuff that we're talking about. Alright. So let's now create a discriminated union for payments. We've got a bunch of different payments.

[04:54] In this case, I'm actually gonna make a credit card. We'll do payment. There we go. And that'll be our credit card. We got our bank transfer and PayPal.

[05:05] Each one of these are gonna have different properties, but they're all going to share the type property. And so, this is an important thing that I wanted to make sure you all understood as well is that the property that you use for the discriminated union actually doesn't matter. You can call it anything you want. Up here, we called it status, and here below, we're calling it type. It doesn't matter what it is as long as they all have the same property, and they are all, I was about to say they're all of the same type, but they actually don't have to be.

[05:38] But as long as they are all the same property name, then you can use that as a discriminated union. Alright. So let's make our describe payment, right here. And this is going to switch on the payment type, and we're gonna handle all of that. And this is just kind of review from what we did before.

[05:57] So let's save that. And there we go. We've got our card ending in this, PayPal, and bank account. All looks just fine. If we were to try to add, payment type right here, we're going to get an error because payment doesn't exist on never.

[06:13] You could keep the default in here if you want, but I would just remove it because it's impossible to call this with a type that, is incorrect. It's going to TypeScript is gonna throw an error. This is one of the things we love about TypeScript is, sometimes people get mad and they're saying TypeScript is always giving me red squigglies all over the place. And I like to think of TypeScript as the friend that you keep around because, they tell you that you have, something in your teeth even when you don't wanna hear it. But you do you do wanna hear it.

[06:44] Like, you wanna get that thing out of your teeth. So, there we go. We've got our discriminated unions handling all the different types of, API responses and payment types that we have in here using, a discriminated union with the different, payment types. So there you go. Hopefully, that was fun and interesting to you.

[07:06] Well done on that one.

[00:00] Okay. Now we can get into discriminated unions. And no, not not Out of out of context, that sounds kinda bad. We're not discriminating against unions. But we're going to use the discriminated unions pattern in TypeScript.

[00:12] This is a really common pattern and I'm excited for you to explore it and get used to it. So jump on into this and we'll talk about it when you're done.

In TypeScript, every variable, every function parameter, every return value carries a type. When those types are wrong, you get bugs that surface at the worst possible moment. Runtime crashes, silent data corruption, and hours spent debugging issues that the compiler could have caught before you ever hit save.

The problem is that you haven't built the mental model for how its type system actually works. You annotate a few variables, sprinkle in some `any` when things get frustrating, and move on, never realizing you've turned off the very safety net that makes TypeScript worth using.

The Type Safety Workshop takes you deep into TypeScript's type system. You'll learn how to model your data precisely with type aliases, union types, and generics, then use that precision to catch entire categories of bugs at compile time instead of in production.

In this workshop, you'll work through real patterns like discriminated unions for API responses, type guards for runtime narrowing, and `as const` for deriving types from your source code, the same techniques used in production TypeScript codebases every day.

## Type Aliases

Every time you duplicate a type annotation across multiple variables or functions, you're creating a maintenance problem. Change the shape in one place, forget the other, and you've got a type mismatch that might not surface for weeks. Type aliases let you define a type once and reference it everywhere.

In this section, you'll create reusable types and learn how to compose them from smaller building blocks:

- Creating type aliases for objects with `type User = { id: string; name: string }`
- Using `typeof` to derive types from existing runtime values
- Composing types from primitive aliases like `ID`, `Timestamp`, and `Email` to communicate intent
- Using `Record` to type objects with dynamic string keys
- Choosing between explicit type definitions and inference with `typeof`

## Union Types

Real application data is rarely just one thing. An API response might be a success object or an error. A user ID might be a string or a number. Without union types, you're forced to use `any` or write separate functions for every possible shape-- neither of which scales.

This section covers one of TypeScript's most powerful features and the patterns that make it practical:

- Defining types that accept multiple shapes with the `|` operator
- Narrowing unions with `typeof` and `instanceof` checks
- Using the `in` operator to distinguish between object shapes
- Writing custom type guard functions with the `value is Type` syntax
- Building discriminated unions with a shared status or type property
- Exhaustive checking with `switch` statements and the `never` type

## Literal Types

TypeScript infers `const x = "hello"` as the literal type `"hello"`, but `let y = "hello"` becomes just `string`. That distinction matters more than you'd think-- especially when you want your types to reflect the exact values in your code rather than broad categories.

Here you'll learn how to preserve and leverage literal types in your programs:

- Using `as const` to preserve literal types on objects and arrays
- Deriving union types from object keys with `keyof typeof`
- Extracting value types from constant objects for precise unions
- Building a single source of truth where types flow from runtime values
- Practical patterns like typed route maps and discriminated return types

## Intersection Types

Union types let a value be one of several shapes. Intersection types go the other direction-- combining multiple types into one that has all their properties. It's the type-level equivalent of spreading objects together.

This section teaches you how to compose types from reusable pieces:

- Combining types with the `&` operator to build composite shapes
- Creating reusable building blocks like `WithID`, `WithTimestamps`, and `WithAuthor`
- Assembling entity types (`User`, `Post`, `Comment`) from shared base types
- Understanding how intersection differs from union in practice

## Any vs Unknown

When TypeScript gets in your way, it's tempting to reach for `any` and move on. The problem is that `any` doesn't just silence one error-- it turns off type checking for everything that value touches. It's an escape hatch that defeats the purpose of using TypeScript in the first place.

This section shows you the safer alternative and when each escape hatch is appropriate:

- Understanding why `any` disables all type checking on a value
- Using `unknown` as a type-safe alternative that requires narrowing before use
- Narrowing `unknown` values with `typeof` checks and error throwing
- Processing values of different types through runtime checks
- When you'll encounter `any` in library code and why it exists for backward compatibility

## Generics

Without generics, you'd need a separate function for every type you want to support-- `firstNumber`, `firstString`, `firstUser`-- or you'd give up and use `any`. Generics let you write a single function that works with any type while preserving full type safety through the entire call chain.

This section takes you from basic generic syntax through real-world patterns with constraints:

- Writing generic functions with type parameters (`<Value>`)
- Letting TypeScript infer generic types from function arguments
- Creating generic types for reusable patterns like loading states
- Constraining generics with `extends` to require specific shapes
- Building a type-safe `getProperty` function using `keyof` constraints
- Merging objects with fully typed intersection return values

## Interfaces

Interfaces look almost identical to type aliases-- and for most purposes, they behave the same way. So why do they exist? Historical reasons, mostly. But interfaces have one unique capability that types can't replicate: declaration merging.

Here you'll learn when interfaces matter and when to stick with types:

- Defining object shapes with `interface` syntax
- Extending interfaces to build up from base types
- Understanding declaration merging and how interfaces combine across modules
- Augmenting global interfaces for plugin systems and library configuration
- Why types are preferred for day-to-day code and when interfaces earn their place

## Enums

Enums give you a way to define a set of named constants-- `OrderStatus.Pending`, `OrderStatus.Active`, `OrderStatus.Completed`. They're one of the few TypeScript features that generate actual runtime code, which makes them unique in the type system and controversial in the community.

In this section, you'll learn how enums work and why union types are often the better choice:

- Creating string enums for order statuses and log levels
- Using enums in switch statements and type-safe functions
- Understanding the runtime code that enums generate after compilation
- Migrating from enums to union types for simpler, cleaner code
- Comparing the developer experience of enums vs. unions for autocomplete and type safety


TypeScript's type system: learn type aliases, unions, generics, intersections, and more to catch bugs at compile time instead of in production.

Type Safety

Programming Foundations

Structured Data

Object Oriented TypeScript

Advanced TypeScript

Practical TypeScript: Foundations to Fluency

Master TypeScript's type safety and enhance your coding skills with practical exercises on type aliases, generics, and more. Dive into advanced concepts today!

Intro to Type Safety

Introduction to Type Safety

Master Type Aliases in TypeScript to simplify your code, enhance reusability, and effectively manage complex data types with ease.

Intro to Type Aliases

Master TypeScript by creating and using type aliases to enhance your coding efficiency and clarity in this hands-on workshop.

Naming Types

Master type composition by creating effective type aliases for primitives and objects, enhancing your TypeScript skills for cleaner, more maintainable code.

Composition

Master record types and generics in this engaging exercise, enhancing your object handling skills for dynamic applications. Dive in and elevate your coding expe

Record Type

Break Type Aliases

1. Type Aliases

Master TypeScript union types to enhance your coding skills. Discover how to manage multiple types effectively and streamline your logic.

Intro to Union Types

Master union types in this exercise by working with strings, errors, and numbers to enhance your TypeScript skills and streamline your functions.

Multiple Types

Master TypeScript type guards and user handling to efficiently manage strings and arrays, enhancing your JavaScript coding skills today!

Narrowing

Master type guards in TypeScript to streamline type checking and enhance your code's reliability. Create custom functions for effective type validation.

Type Guards

Master union types and type narrowing in this engaging lesson, enhancing your coding skills and retention while enjoying a light-hearted approach.

Break Union Types

2. Union Types

Master literal types in TypeScript by leveraging 'as const' for type safety and precision. Enhance your coding with powerful type narrowing techniques.

Intro to Literal Types

Master literal preservation with the as const keyword and enhance your TypeScript skills, ensuring type safety and precision in your code.

Preserve Literals 

Master the concept of a single source of truth by deriving types from code using as const, enhancing your TypeScript skills and code accuracy.

Single Source Of Truth 

Master breaking literal types to enhance your coding skills, boost retention, and build robust applications. Dive in and elevate your development game!

Break Literal Types

3. Literal Types

Master intersection types by combining multiple types effortlessly. Enhance your TypeScript skills and streamline your coding with practical examples.

Intro to Intersection Types

Master intersection types in TypeScript to enhance your coding skills and streamline your development process. Join us to unlock powerful type combinations!

Combining Types 

Master intersection types in web development while enjoying a refreshing break. Boost your skills and retain knowledge effectively for real-world applications.

Break Intersection Types

4. Intersection Types

Master the differences between Any and Unknown in TypeScript to enhance your coding skills, improve type safety, and optimize your development process.

Intro to Any vs Unknown

Master the nuances of JavaScript's "any" vs. "unknown" types and enhance your coding skills with practical insights in this engaging exercise.

Escape Hatches 

Master the concepts of breaking any and unknown variables, boost your coding skills, and unlock your potential as a developer in this engaging lesson.

Break Any vs Unknown

5. Any vs Unknown

Unlock the power of TypeScript generics to create flexible, type-safe functions that work with any data type. Enhance your coding skills today!

Intro to Generics

Master generic functions by creating two practical examples, enhancing your coding skills and understanding of syntax for real-world applications.

Generic Functions 

Master generic types in programming with practical examples and enhance your coding skills to create more flexible and reusable code.

Generic Types

Master advanced generics in programming by exploring constraints that enhance type safety and streamline function usability. Unlock powerful coding techniques n

Constraints

Master generics in web development and boost your coding skills with practical exercises and insights that enhance your programming efficiency.

Break Generics

6. Generics

Master interfaces in web development and discover their unique advantages, including declaration merging and practical syntax. Elevate your coding skills now!

Intro to Interfaces

Master object shapes with interfaces in this hands-on exercise, enhancing your TypeScript skills and building robust, type-safe applications.

Object Shapes 

Master interface extension in TypeScript and enhance your coding skills by combining types effectively with the extends keyword. Join us now!

Extending Interfaces 

Master declaration merging in TypeScript interfaces across modules and unlock powerful library design techniques for your projects.

Declaration Merging 

Revitalize your coding skills with a refreshing break! Discover the importance of posture and movement for enhanced focus and productivity in development.

Break Interfaces

7. Interfaces

Master enums with this concise guide, exploring their syntax, unique values, and practical applications to enhance your coding skills effectively.

Intro to Enums

Master string enums in TypeScript through a hands-on order management system exercise and enhance your coding skills for better type safety.

String Enums 

Master the differences between enums and unions while migrating your code. Discover why unions may be the better choice for your development projects.

Enum Vs Union 

Master enum concepts and enhance your coding skills with practical exercises and retention techniques to boost your development knowledge effectively.

Break Enums

8. Enums

Congratulations on mastering type safety! Solidify your skills with practical examples and build your confidence in TypeScript's powerful features.

Type Safety

Type Safety

Transcript

Discriminated Unions

Transcript