Master promise rejections in web development by handling errors effectively. Gain practical skills to troubleshoot user connectivity and server issues.

Rejection

[00:00] Alright. Let's play around with this. So we've got our user, and then we have a user profile that includes a status of whether it was successful or not and an error message if it was not successful. Our fetch user has been updated to say if the ID that is given to, for the user to fetch, if that's not equal to one, then that user has not been found. We only have one user in our database, evidently.

[00:21] And then we resolve if the ID is one. Okay. So great. Let's go ahead and just call get user profile with one and we'll console log the result just to make sure all of that is working. And, yep, it works just fine.

[00:35] So that's great. Then we go ahead and do two. Tada. And what happens? Nothing happens because our then handler was not called.

[00:46] So then is only called when, things go well. If things did not go well, then your then is not called. Instead, you're going to, actually have a couple of options of how to deal with this. So one option is you add a catch handler. So that's what our our AI assistant is trying to do here is we're going to update to handle errors, and that's that's working right here.

[01:12] So if the user is found successfully, then we'll return a status of success, and here's the user. If that, fetch user fails, then it's gonna fall into this catch category, where we get the error and we can then return the error message. And so then, we're our promise is now properly handled. And, the promise that's returned from this catch call because this is chaining, so we got promise. We create we create a promise with this.

[01:40] We create a promise with this, and then we actually create another promise with this. So because this is handled, now, the promise that's returned from here, is in, encapsulated in this call. Then we will call a then on that. And because it's handled properly, we get the result, which is going to be our error in this case. So a couple of interesting things about this.

[02:05] You could actually go really, really deep and really far into how all these promises chain and everything, and I encourage you to do that. But there, there are a lot of things to consider with this. First, before we go too far into that though, I wanna show you one other, mechanism for handling this error, and that is actually a second argument to then. So then it's actually accepts two arguments. So this is one.

[02:30] This is the the callback if things go well, but you can also provide a callback if things go poorly. So I can get rid of this catch call, and we can do, here's what happens if things go well, and here's what happens if things don't go well with the fetch user callback. K? So we actually end up with the exact same behavior. So these are effectively the same thing, but they are slightly different, and I'm gonna show you how.

[02:57] So here, we're going to, yeah, return success, etcetera, etcetera. But what if we're doing something inside of here? And then, yeah, we can do as const, I suppose. What if we're doing something inside of here that, blows up? Like, we say console log user, say hi, and we're not using TypeScript or something, and this blows up.

[03:18] Well, we're going to end up oh, here. And let's fix this right there. We're going to end up calling this. It blows up, and we're not handling that. And the reason that is happening is because, this error handler right here is handling errors with the fetch user.

[03:34] It's not handling errors with our promise here. K? So we are when we create this then right here, this creates a new promise. This error handler, the second argument to this then, is handling errors on this promise, not the one that's being created with it. And so we could actually catch right here and we're gonna say, holistic error to distinguish it from others.

[04:02] There we go. So there we go. We get, say hi is not a function. Here's our holistic error. So that works out nicely for us.

[04:12] But that's what's going on right here is this error handler is only gonna handle errors on the promise upon which it was added. So that's one reason why you might prefer to use a dot catch, because in this case, we are going to properly handle it. We'll get the error. We'll get the message. It's not going to blow up in our faces where we end up having to catch it elsewhere.

[04:34] So, that's an important thing to to recognize. The other thing is sometimes you might have a catch handler or even, an error handler here where you want to, catch that error but also propagate it. So, like, have it continue on. So we're gonna catch it so we can add a logging, but then we want somebody else to handle it for us. And so if that is the case, then, we can still return or or or, we can still maybe let's say that we do wanna console log it.

[05:04] So we're gonna console dot or we'll console error that. There we go. But then we're going to want to reject or or maintain the rejected status of the promise. So if we simply return something right here, that means we're turning the error that was thrown, by this promise. We're turning that from a rejected status into a resolved status because we're handling it and we're doing something with it.

[05:26] But if we wanna maintain that rejected status, then there are a couple ways we could do it. We could say throw error. So that'll just take the exact same error and propagate it up, make somebody else deal with it. And so here, we're gonna see we get that console law or that console error. So that's gonna show us that error here.

[05:43] And we're going to propagate the error so somebody else handles it and that's where we're handling it right here. So, the other thing to consider here is what if we wanted to change that error somehow? Well, you could either throw a new error, and you can have unknown errors or something, or you can actually return a rejected promise. So you can actually create resolved and rejected promises with promise dot resolve and promise dot reject. And if we return a rejected promise, then that will maintain the rejected state, and propagate it up still.

[06:19] So it's similar to, saying throw. So you could say throw right there or you could say return rejected promise and here is the thing I'm rejecting. Now this is the the error that we're gonna get right here. So, yeah, there are a whole bunch of ways to mix and match these. I encourage you to take some time, play around in here, try to throw an error, try to do a promise dot reject, do a promise.resolve, try to move this callback inside of, as the second argument here, play around with where all of the code is going, stick debug statements and console logs, all of that stuff.

[06:54] Explore plenty with this to kind of get a good idea of how all of the code flows in here. And with that, I think, you have learned what you need to know about promises. So good job on that one.

[00:00] Alright. So not always do things go the way that we planned or the way we wanted. Sometimes you make a network request and the user is not connected to the Internet anymore, or there's an error on the back end server, or for any number of reasons, things can go wrong. And so we need to handle what we call rejections, which is a fancy word for errors, but that's promise specific. So you can resolve a promise or you can reject a promise.

[00:24] And, so in this exercise step, we're going to look at what happens if we reject. We've got an example here where if the ID is not equal to, the string one, then we're gonna say the user is not found. What do we do about that? I'm excited for you to play around with it.

You now know the basics of TypeScript. You can annotate variables, define types, and write generic functions. But the moment you need to fetch data from an API, organize code across multiple files, or build a utility type that transforms other types, the beginner patterns stop being enough.

The gap between "I can use TypeScript" and "I can use TypeScript well" comes down to the advanced features that power every serious codebase: 

- Promises and async/await for handling asynchronous operations.
- Modules for organizing code at scale.
- Utility types and conditional types for writing the kind of precise, flexible types that make libraries and frameworks feel magical to use.

In this workshop, you'll work through the advanced TypeScript features that separate everyday usage from real fluency. You'll build a deep understanding of promises and async/await, learn to structure code with modules, and master the type-level programming that powers TypeScript's most useful patterns.

Every section goes beyond syntax. You'll trace how promises chain and resolve, debug asynchronous code with real tools, and build your own utility types from scratch so the built-in ones stop feeling like magic.

## Promises

JavaScript runs on a single thread. When you make a network request, read a file, or wait for user input, you can't just stop the program and wait. Promises are how JavaScript handles this-- they represent a value that doesn't exist yet but will at some point in the future.

This section builds your mental model for how promises actually work under the hood:

- Creating promises with `new Promise` and the `resolve` callback
- Attaching `.then` handlers to process resolved values
- Chaining promises to sequence dependent asynchronous operations
- Handling errors with `.catch` and the second argument to `.then`
- Understanding the difference between catching errors on the current promise vs. the chain
- Propagating rejections with `throw` and `Promise.reject`

## Async/Await

Promises solve the problem of asynchronous code, but chaining `.then` calls creates its own kind of complexity. Async/await is syntactic sugar that lets you write asynchronous code that reads like synchronous code-- no callbacks, no indentation pyramids, just `await` and move on.

Here you'll refactor promise chains into async/await and learn how error handling maps between the two:

- Converting `.then` chains to `async`/`await` for linear, readable flow
- Understanding how `async` immediately changes a function's return type to `Promise`
- Handling errors with `try`/`catch`/`finally` instead of `.catch`
- Adding explicit `Promise<Type>` return type annotations to async functions
- Using top-level `await` in modules
- Why you can't type the rejection value of a promise

## Modules

Through this entire workshop series, you've been using `export` at the bottom of every file without formally learning what it does. Modules are how JavaScript organizes code across files-- exporting values from one file and importing them in another.

This section covers the module system you'll use in every TypeScript project:

- Exporting values with `export` at declaration or as export specifiers
- Importing named exports and aliasing with `as`
- Using `import * as` to grab everything from a module
- Default exports vs. named exports and why named exports are preferred
- Type-only imports with `import type` for cleaner compiled output
- Mixing type and value imports in a single statement

## Type Operators

You've been using `keyof`, `typeof`, and index access types throughout the workshop series because it's hard to get far in TypeScript without them. Now it's time to formalize that knowledge and go deeper into what these operators can do when combined.

In this section, you'll master the operators that bridge runtime values and the type system:

- Using `keyof` to extract a union of property names from an object type
- Pulling runtime values into the type world with `typeof`
- Combining `keyof typeof` to derive types from actual objects
- Accessing nested types with index access syntax (`User["address"]["city"]`)
- Extracting element types from arrays with `[number]` index access
- Using `as const` with type operators for precise literal unions

## Utility Types

TypeScript ships with a library of generic types that transform other types. Need to make all properties optional? `Partial`. Want only certain fields? `Pick`. These built-in utilities handle the type transformations you'd otherwise write by hand, and knowing them saves you from reinventing the wheel.

This section teaches you the most useful utility types and how to build your own:

- Making properties optional with `Partial` and required with `Required`
- Selecting subsets with `Pick` and removing properties with `Omit`
- Creating dynamic object types with `Record` and immutable ones with `Readonly`
- Filtering union types with `Exclude`, `Extract`, and `NonNullable`
- Extracting function signatures with `ReturnType`, `Parameters`, and `Awaited`
- Building custom mapped types that replicate and extend the built-in utilities

## Conditional Types

Conditional types are TypeScript's version of an `if` statement at the type level. They use the `extends` keyword to check whether a type matches a shape, then resolve to one type or another based on the result. Most developers never write them directly, but they power the utility types and library APIs you use every day.

This section takes you into the most advanced corner of TypeScript's type system:

- Writing conditional types with the `extends ? :` ternary syntax
- Checking whether a type is a string, array, or function at the type level
- Using the `infer` keyword to extract types from within other types
- Unwrapping promise types and array element types with `infer`
- Recreating built-in utilities like `ReturnType` to understand how they work


Go beyond basics by learning async/await, modules, utility types, and conditional types to write clearer, safer, and more scalable TypeScript.

Advanced TypeScript

Programming Foundations

Structured Data

Type Safety

Object Oriented TypeScript

Practical TypeScript: Foundations to Fluency

Master advanced TypeScript concepts including promises, async/await, modules, and conditional types to elevate your development skills and boost productivity.

Intro to Advanced TypeScript

Introduction to Advanced TypeScript

Master JavaScript promises to handle asynchronous operations effectively, freeing up the main thread and enhancing your web development skills.

Intro to Promises

Master JavaScript promises and asynchronous programming with hands-on exercises. Enhance your coding skills by simulating delayed function execution.

Creation

Master promise chaining to streamline asynchronous code. Discover how to effectively manage multiple operations with ease and enhance your JavaScript skills.

Chaining

Discover effective strategies to break promises in coding, enhance your AI communication skills, and boost your learning experience in web development.

Break Promises

1. Promises

Master async/await to simplify your JavaScript code, handle promises elegantly, and enhance your asynchronous programming skills effectively.

Intro to Async/Await

Transform your promise chains into cleaner, more readable async/await syntax. Discover how to simplify your code while maintaining functionality.

Linear Flow

Master error handling in JavaScript with promises and async/await, enhancing your development skills and building robust applications.

Error Handling

Master promise types in JavaScript to enhance your asynchronous programming skills and streamline your web development projects effectively.

Promise Types

Master async/await and deepen your understanding of JavaScript promises. Quiz yourself and explore practical examples for real-world application.

Break Async/Await

2. Async/Await

Master module syntax to enhance your code organization and reusability. Discover exports, imports, and aliasing for efficient development practices.

Intro to Modules

Master module organization by efficiently importing and exporting code. Enhance your development skills and streamline your projects for better maintainability.

Import Export

Master the differences between default and named exports in JavaScript, enhancing your coding skills and making informed choices for better project structure.

Default Vs Named

Master importing and exporting types to streamline your utility libraries, enhancing your code's efficiency and organization in this hands-on exercise.

Type Only Imports

Master module retention techniques with effective note-taking and spaced repetition, plus enjoy a refreshing break to boost your learning experience.

Break Modules

3. Modules

Master TypeScript's type operators, explore key manipulation, and unlock powerful indexing techniques to enhance your development skills in this essential lesso

Intro to Type Operators

Master TypeScript's keyof and typeof operators to enhance your coding skills and streamline your development process with practical exercises.

Keyof Typeof

Master index access types to efficiently retrieve data and enhance your development skills with our in-depth exercise. Boost your coding expertise today!

Index Access

Master break type operators to enhance your coding efficiency. Take a break, recharge, and optimize your web development skills today!

Break Type Operators

4. Type Operators

Master TypeScript utility types by exploring built-in generics, creating custom types, and enhancing your coding efficiency in this engaging lesson.

Intro to Utility Types

Master TypeScript's Partial and Pick utility types to enhance your coding efficiency and streamline your projects. Dive in and elevate your skills!

Partial Pick

Explore a variety of utility types to enhance your web development skills and expand your toolkit, unlocking new possibilities for your projects.

More Utilities

Unlock powerful function utilities to enhance your coding efficiency and streamline your development process with essential utility types.

Function Utilities

Master generic types by reimplementing TypeScript utility types and creating unique functions. Enhance your skills with practical exercises and real-world appli

Creating Mapped Types

Master advanced TypeScript utility types and enhance your coding skills. Take a well-deserved break to reinforce your learning and boost productivity.

Break Utility Types

5. Utility Types

Master advanced conditional types in TypeScript using ternaries and the infer keyword to create powerful, flexible code structures for modern applications.

Intro to Conditional Types

Master TypeScript conditionals as you dive into ternary logic, enhancing your coding skills and building a strong foundation in programming.

Basic Conditionals

Master advanced infer techniques by recreating built-in types, enhancing your development skills and deepening your understanding of TypeScript.

Infer

Master conditional types in TypeScript and enhance your coding skills. Retain knowledge effectively and boost your development confidence today!

Break Conditional Types

6. Conditional Types

Celebrate your mastery of advanced TypeScript! Discover powerful features like promises, modules, and type operators to build robust applications confidently.

Advanced TypeScript

Advanced TypeScript

Transcript

Rejection

Transcript