feat: update OOP exercises with enhanced class structures, method overrides, and improved README documentation

Author: kentcdodds

exercises/03.inheritance-and-polymorphism/02.problem.method-overriding/README.mdx

@@ -3,11 +3,13 @@
 👨‍💼 Now let's add methods to our shape hierarchy. Each shape will override a
 method to provide its own implementation.
 
+The `Shape`, `Circle`, and `Rectangle` classes from the previous exercise are
+already defined. You'll add and override the `getArea()` method.
+
 🐨 Open <InlineFile file="index.ts" /> and:
 
 1. Add a `getArea()` method to `Shape` that returns 0
 2. Override `getArea()` in `Circle` to return π × radius²
 3. Override `getArea()` in `Rectangle` to return width × height
-4. Optionally use `super` to call the parent method
 
 📜 [TypeScript Handbook - Overriding Methods](https://www.typescriptlang.org/docs/handbook/2/classes.html#overriding-methods)

exercises/03.inheritance-and-polymorphism/02.problem.method-overriding/index.ts

@@ -1,28 +1,43 @@
 // Method Overriding
 
-// 🐨 Create a Shape base class with:
-// - Field: color (string)
-// - Constructor that takes color
-// - Method: getArea() returns 0
+class Shape {
+	color: string
 
-// 🐨 Create a Circle class that extends Shape:
-// - Field: radius (number)
-// - Constructor that takes color and radius
-// - Override getArea() to return Math.PI * radius ** 2
+	constructor(color: string) {
+		this.color = color
+	}
 
-// Test Circle
-// const circle = new Circle('red', 5)
-// console.log(circle.getArea()) // Should print ~78.54
-// console.log(circle)
+	// 🐨 Add a getArea() method that returns 0
+}
+
+class Circle extends Shape {
+	radius: number
+
+	constructor(color: string, radius: number) {
+		super(color)
+		this.radius = radius
+	}
+
+	// 🐨 Override getArea() to return Math.PI * radius ** 2
+}
 
-// 🐨 Create a Rectangle class that extends Shape:
-// - Fields: width (number), height (number)
-// - Constructor that takes color, width, and height
-// - Override getArea() to return width * height
+class Rectangle extends Shape {
+	width: number
+	height: number
 
-// Test Rectangle
+	constructor(color: string, width: number, height: number) {
+		super(color)
+		this.width = width
+		this.height = height
+	}
+
+	// 🐨 Override getArea() to return width * height
+}
+
+// Test getArea methods
+// const circle = new Circle('red', 5)
 // const rectangle = new Rectangle('blue', 10, 20)
+// console.log(circle.getArea()) // Should print ~78.54
 // console.log(rectangle.getArea()) // Should print 200
-// console.log(rectangle)
 
 // export { Shape, Circle, Rectangle }

exercises/03.inheritance-and-polymorphism/03.problem.substitutability/README.mdx

@@ -3,12 +3,18 @@
 👨‍💼 Let's build a media player that can play different types of media files.
 We'll use polymorphism to handle all media types uniformly.
 
+The `MediaFile`, `AudioFile`, and `VideoFile` classes are already defined.
+You'll create a `MediaPlayer` that works with any of them.
+
 🐨 Open <InlineFile file="index.ts" /> and:
 
-1. Create a `MediaFile` base class with a `play()` method
-2. Create `AudioFile` and `VideoFile` classes that extend `MediaFile`
-3. Each should override `play()` with its own implementation
-4. Create a `MediaPlayer` class with a method that accepts `MediaFile`
-5. Demonstrate that both `AudioFile` and `VideoFile` can be used interchangeably
+1. Create a `MediaPlayer` class with a `playFile()` method
+2. The method should accept a `MediaFile` parameter
+3. Call `media.play()` and return the result
+4. Test it with both `AudioFile` and `VideoFile` instances
+
+💰 The key insight: `playFile()` accepts `MediaFile`, but it works with any
+subclass (`AudioFile`, `VideoFile`) because of substitutability—subclasses
+can be used wherever their parent class is expected.
 
 📜 [TypeScript Handbook - Classes](https://www.typescriptlang.org/docs/handbook/2/classes.html)

exercises/03.inheritance-and-polymorphism/03.problem.substitutability/index.ts

@@ -1,32 +1,38 @@
 // Substitutability - Polymorphism
 
-// 🐨 Create a MediaFile base class with:
-// - Field: filename (string)
-// - Constructor that takes filename
-// - Method: play() returns string "Playing {filename}"
-
-// 🐨 Create an AudioFile class that extends MediaFile:
-// - Override play() to return "Playing audio: {filename}"
-
-// Test AudioFile
-// const audio = new AudioFile('song.mp3')
-// console.log(audio)
-
-// 🐨 Create a VideoFile class that extends MediaFile:
-// - Override play() to return "Playing video: {filename}"
-
-// Test VideoFile
-// const video = new VideoFile('movie.mp4')
-// console.log(video)
+class MediaFile {
+	filename: string
+
+	constructor(filename: string) {
+		this.filename = filename
+	}
+
+	play(): string {
+		return `Playing ${this.filename}`
+	}
+}
+
+class AudioFile extends MediaFile {
+	play(): string {
+		return `Playing audio: ${this.filename}`
+	}
+}
+
+class VideoFile extends MediaFile {
+	play(): string {
+		return `Playing video: ${this.filename}`
+	}
+}
 
 // 🐨 Create a MediaPlayer class with:
 // - Method: playFile(media: MediaFile) returns string
 //   - Calls media.play() and returns the result
 
 // Test MediaPlayer (polymorphism)
+// const audio = new AudioFile('song.mp3')
+// const video = new VideoFile('movie.mp4')
 // const player = new MediaPlayer()
 // console.log(player.playFile(audio)) // Should work - AudioFile is substitutable for MediaFile
 // console.log(player.playFile(video)) // Should work - VideoFile is substitutable for MediaFile
-// console.log(player)
 
 // export { MediaFile, AudioFile, VideoFile, MediaPlayer }

exercises/04.composition-vs-inheritance/02.problem.dependency-injection/index.ts

@@ -25,7 +25,7 @@ class EmailService {
 // - Extends Logger
 // - Override log() to store messages in an array: #logs (private field)
 //   - Stores messages instead of printing them
-// - Method: getLogs() returns string[] to retrieve stored messages
+// - Method: getLogs() returns Array<string> to retrieve stored messages
 
 // Test MockLogger
 // const mockLogger = new MockLogger()

exercises/04.composition-vs-inheritance/02.solution.dependency-injection/index.ts

@@ -21,13 +21,13 @@ class EmailService {
 
 // MockLogger stores logs in memory (useful for testing)
 class MockLogger extends Logger {
-	#logs: string[] = []
+	#logs: Array<string> = []
 
 	log(message: string): void {
 		this.#logs.push(message)
 	}
 
-	getLogs(): string[] {
+	getLogs(): Array<string> {
 		return [...this.#logs] // Return a copy to prevent external mutation
 	}
 }

exercises/README.mdx

@@ -9,10 +9,9 @@ combine data and behavior. TypeScript makes OOP powerful with its type system.
 We'll cover:
 
 1. **Classes** - Fields, methods, constructors, private fields, and defaults
-2. **Interfaces and Classes** - Implementing contracts
-3. **Inheritance** - Extending classes and overriding methods
-4. **Polymorphism** - Substitutability and why it matters
-5. **Composition vs Inheritance** - Practical decision-making
+2. **Interfaces and Classes** - Implementing contracts and programming to abstractions
+3. **Inheritance and Polymorphism** - Extending classes, overriding methods, and substitutability
+4. **Composition vs Inheritance** - Dependency injection and practical decision-making
 
 ## OOP vs Functional Programming
 
@@ -24,7 +23,7 @@ should know the alternative:
 
 ```ts
 class ShoppingCart {
-	#items: Product[] = []
+	#items: Array<Product> = []
 	addItem(product: Product) {
 		this.#items.push(product)
 	}
@@ -37,7 +36,7 @@ class ShoppingCart {
 **FP organizes around functions** - data and transformations separate:
 
 ```ts
-type Cart = readonly Product[]
+type Cart = ReadonlyArray<Product>
 const addItem = (cart: Cart, product: Product): Cart => [...cart, product]
 const getTotal = (cart: Cart): number =>
 	cart.reduce((sum, p) => sum + p.price, 0)