enhance exercises: add examples for promises, async/await, modules, and utility types with type annotations and error handling

Author: kentcdodds

exercises/01.promises/01.problem.creation/README.mdx

@@ -3,6 +3,15 @@
 👨‍💼 We need to simulate an API call that fetches user data. Let's create a
 Promise that resolves with user information after a delay.
 
+```ts
+type Forecast = { day: string; high: number }
+
+const fetchForecast = () =>
+	new Promise<Forecast>((resolve) => {
+		setTimeout(() => resolve({ day: 'Mon', high: 72 }), 500)
+	})
+```
+
 🐨 Open <InlineFile file="index.ts" /> and:
 
 1. Create a `fetchUser` function that returns a `Promise<User>`

exercises/01.promises/02.problem.chaining/README.mdx

@@ -3,6 +3,23 @@
 👨‍💼 After fetching a user, we need to fetch their orders. Let's chain these
 operations together using `.then()`.
 
+```ts
+type Playlist = { id: string; name: string }
+type Track = { id: string; title: string }
+
+function fetchPlaylist(): Promise<Playlist> {
+	return Promise.resolve({ id: 'pl1', name: 'Morning Mix' })
+}
+
+function fetchTracks(playlistId: string): Promise<Array<Track>> {
+	return Promise.resolve([{ id: `${playlistId}-t1`, title: 'Sunrise' }])
+}
+
+fetchPlaylist()
+	.then((playlist) => fetchTracks(playlist.id))
+	.then((tracks) => console.log(tracks))
+```
+
 🐨 Open <InlineFile file="index.ts" /> and:
 
 1. Implement `fetchUser` and `fetchOrders` so they resolve with data

exercises/02.async-await/01.problem.linear-flow/README.mdx

@@ -3,6 +3,25 @@
 👨‍💼 Let's convert the Promise chain from the previous exercise to use
 async/await. This will make the code much more readable!
 
+```ts
+type Recipe = { id: string; title: string }
+type Ingredient = { name: string }
+
+async function loadRecipe(id: string): Promise<Recipe> {
+	return { id, title: 'Pancakes' }
+}
+
+async function loadIngredients(recipeId: string): Promise<Array<Ingredient>> {
+	return [{ name: `${recipeId}-flour` }]
+}
+
+async function loadCookingData() {
+	const recipe = await loadRecipe('r1')
+	const ingredients = await loadIngredients(recipe.id)
+	return { recipe, ingredients }
+}
+```
+
 🐨 Open <InlineFile file="index.ts" /> and:
 
 1. Create an `async` function called `loadUserData`

exercises/02.async-await/02.problem.error-handling/README.mdx

@@ -3,6 +3,24 @@
 👨‍💼 Our async code needs proper error handling. Let's use try/catch to handle
 failures gracefully.
 
+```ts
+async function readConfig() {
+	if (Math.random() > 0.5) throw new Error('Missing config')
+	return { theme: 'dark' }
+}
+
+async function loadSettings() {
+	try {
+		const config = await readConfig()
+		return config
+	} catch (error) {
+		return { theme: 'light', error }
+	} finally {
+		// cleanup
+	}
+}
+```
+
 🐨 Open <InlineFile file="index.ts" /> and:
 
 1. Wrap the async operations in a `try` block

exercises/02.async-await/03.problem.promise-types/README.mdx

@@ -3,6 +3,18 @@
 👨‍💼 Let's ensure our async functions have proper type annotations. This helps
 TypeScript catch errors and makes our code more maintainable.
 
+```ts
+type Episode = { id: string; title: string }
+
+async function fetchEpisode(): Promise<Episode> {
+	return { id: 'e1', title: 'Pilot' }
+}
+
+async function fetchEpisodeIds(): Promise<Array<string>> {
+	return ['e1', 'e2']
+}
+```
+
 🐨 Open <InlineFile file="index.ts" /> and:
 
 1. Add explicit return type annotations to all async functions

exercises/03.modules/01.problem.import-export/README.mdx

@@ -3,6 +3,14 @@
 👨‍💼 Our code is getting large. Let's split it into separate modules to keep
 things organized.
 
+```ts
+// types.ts
+export type Book = { title: string; pages: number }
+
+// index.ts
+import { type Book } from './types.ts'
+```
+
 🐨 Create a new file `types.ts` and:
 
 1. Move the `User` and `Product` types to `types.ts`

exercises/03.modules/02.problem.default-vs-named/README.mdx

@@ -3,6 +3,23 @@
 👨‍💼 There are two ways to export from modules: named exports and default
 exports. Let's understand when to use each.
 
+```ts
+// utils.ts
+export function formatDistance(meters: number) {
+	return `${meters}m`
+}
+
+export function formatDuration(seconds: number) {
+	return `${seconds}s`
+}
+
+export default class UnitFormatter {
+	formatDistance(meters: number) {
+		return formatDistance(meters)
+	}
+}
+```
+
 🐨 Open <InlineFile file="utils.ts" /> and:
 
 1. Export `formatCurrency` as a **named export**

exercises/04.type-operators/01.problem.keyof-typeof/README.mdx

@@ -2,6 +2,18 @@
 
 👨‍💼 Let's use `keyof` and `typeof` to create type-safe utilities.
 
+```ts
+const palette = {
+	primary: '#222222',
+	accent: '#ff6600',
+}
+
+type PaletteKey = keyof typeof palette
+
+const sizes = ['sm', 'md', 'lg'] as const
+type Size = (typeof sizes)[number]
+```
+
 🐨 Open <InlineFile file="index.ts" /> and:
 
 1. Use `keyof` to get the keys of an object type

exercises/04.type-operators/02.problem.index-access/README.mdx

@@ -4,11 +4,14 @@
 bracket notation.
 
 ```ts
-type User = { id: string; name: string; settings: { theme: 'light' | 'dark' } }
+type Recipe = {
+	title: string
+	author: { name: string; rating: 1 | 2 | 3 | 4 | 5 }
+}
 
-type IdType = User['id'] // string
-type SettingsType = User['settings'] // { theme: 'light' | 'dark' }
-type ThemeType = User['settings']['theme'] // 'light' | 'dark'
+type TitleType = Recipe['title'] // string
+type AuthorType = Recipe['author'] // { name: string; rating: 1 | 2 | 3 | 4 | 5 }
+type RatingType = Recipe['author']['rating'] // 1 | 2 | 3 | 4 | 5
 ```
 
 🐨 Open <InlineFile file="index.ts" /> and:

exercises/05.utility-types/01.problem.partial-pick/README.mdx

@@ -3,6 +3,17 @@
 👨‍💼 We need to create types for updating user data. Some fields should be
 optional, and we only want to allow updating specific fields.
 
+```ts
+type Article = {
+	id: string
+	title: string
+	body: string
+	updatedAt: Date
+}
+
+type ArticlePatch = Partial<Pick<Article, 'title' | 'body'>>
+```
+
 🐨 Open <InlineFile file="index.ts" /> and:
 
 1. Use `Partial<User>` to create a type where all properties are optional