enhance exercises: add new examples for shipment tracking and playlists, update instructions for error handling and type annotations

Author: kentcdodds

exercises/01.promises/01.problem.creation/index.ts

@@ -8,7 +8,6 @@ type User = {
 
 // 🐨 Create a function `fetchUser` that returns a Promise<User>
 //    The Promise should resolve after 1 second with a user object
-//    Use setTimeout to simulate the delay
 
 // 🐨 Call fetchUser and log the result when it resolves
 

exercises/01.promises/03.problem.rejection/index.ts

@@ -31,7 +31,7 @@ function getUserProfile(id: string): Promise<UserProfile> {
 	return fetchUser(id).then((user) => ({ status: 'success', user }) as const)
 }
 
-// 🐨 Update getUserProfile to handle rejections with .catch()
+// 🐨 Update getUserProfile to handle rejections and return an error status
 // 💰 return { status: 'error', message: error.message }
 // 💰 if error isn't an Error, use 'Unknown error'
 

exercises/01.promises/README.mdx

@@ -99,12 +99,18 @@ TypeScript. They represent a value that will be available in the future—either
 a successful result or a failure.
 
 ```ts
-// A Promise that resolves to a string
-function fetchUser(): Promise<string> {
+type Shipment = {
+	trackingId: string
+	status: 'label' | 'in-transit' | 'delivered'
+}
+
+function fetchShipment(trackingId: string): Promise<Shipment> {
 	return new Promise((resolve) => {
-		setTimeout(() => resolve('Alice'), 1000)
+		setTimeout(() => resolve({ trackingId, status: 'in-transit' }), 300)
 	})
 }
+
+fetchShipment('shp_123').then((shipment) => console.log(shipment.status))
 ```
 
 ## Why Promises Matter

exercises/02.async-await/01.problem.linear-flow/index.ts

@@ -48,7 +48,7 @@ function loadUserData() {
 	})
 }
 
-// 🐨 Refactor `loadUserData` to use async/await instead of .then() chains
+// 🐨 Refactor `loadUserData` so the async flow is linear (no nested promise chains)
 
 // 🐨 Export your function so we can verify your work
 

exercises/02.async-await/02.problem.error-handling/index.ts

@@ -45,9 +45,8 @@ function fetchOrders(userId: string): Promise<Array<Order>> {
 }
 
 async function loadUserData(userId: string) {
-	// 🐨 Wrap the async operations in a try block
-	//    Add a catch block to handle errors
-	//    Optionally add a finally block for cleanup
+	// 🐨 Handle errors for the async operations
+	//    Optionally add cleanup that always runs
 
 	const user = await fetchUser(userId)
 	// console.log('User:', user)

exercises/02.async-await/03.problem.promise-types/index.ts

@@ -12,8 +12,7 @@ type Product = {
 	price: number
 }
 
-// 🐨 Add explicit return type annotations to these async functions
-//    Use Promise<User> and Promise<Array<Product>> respectively
+// 🐨 Add explicit Promise-based return type annotations to these async functions
 // 🦺 async function fetchUser(): Promise<User> { ... }
 
 async function fetchUser() {

exercises/02.async-await/README.mdx

@@ -5,17 +5,21 @@ like synchronous code. It's the preferred way to write async code in modern
 TypeScript.
 
 ```ts
-// With Promises
-fetchUser()
-	.then((user) => console.log(user))
-	.catch((error) => console.error(error))
-
-// With async/await
-try {
-	const user = await fetchUser()
-	console.log(user)
-} catch (error) {
-	console.error(error)
+type Playlist = { id: string; trackIds: Array<string> }
+type Track = { id: string; title: string }
+
+async function fetchPlaylist(id: string): Promise<Playlist> {
+	return { id, trackIds: ['t1', 't2'] }
+}
+
+async function fetchTracks(ids: Array<string>): Promise<Array<Track>> {
+	return ids.map((id) => ({ id, title: `Track ${id}` }))
+}
+
+async function loadPlaylist(id: string) {
+	const playlist = await fetchPlaylist(id)
+	const tracks = await fetchTracks(playlist.trackIds)
+	return { playlist, tracks }
 }
 ```
 

exercises/03.modules/01.problem.import-export/data.ts

@@ -1,2 +1 @@
-// 🐨 Export the user and product values here
-//    Use named exports: export const user = { ... }
+// 🐨 Export the user and product values from this module

exercises/03.modules/01.problem.import-export/index.ts

@@ -20,8 +20,8 @@ const product = {
 	price: 999.99,
 }
 
-// 🐨 Open `data.ts` and move the user and product objects there
-//    Export them using named exports, then import them here
+// 🐨 Move the user and product objects into `data.ts`
+//    Export them there and import them back here
 
 displayUser(user)
 displayProduct(product)

exercises/03.modules/02.problem.default-vs-named/index.ts

@@ -1,10 +1,10 @@
 // Default vs Named Exports
 
-// 🐨 Import the named exports: formatCurrency and formatDate
+// 🐨 Bring formatCurrency and formatDate in from './utils.ts'
 // @ts-expect-error - 💣 remove this comment when it passes
 import { formatCurrency, formatDate } from './utils.ts'
 
-// 🐨 Import the default export: Formatter
+// 🐨 Bring Formatter in from './utils.ts' as the default import
 // @ts-expect-error - 💣 remove this comment when it passes
 import Formatter from './utils.ts'