Add destructuring and spread/rest exercises

- Add destructuring exercise (06.destructuring) with object and array steps
- Add spread/rest exercise (07.spread-rest) with object spread and rest params
- Update workshop README and FINISHED files to include new content

Author: kentcdodds

exercises/02.arrays/01.problem.array-basics/README.mdx

@@ -13,7 +13,7 @@ basic array operations.
 💰 Array syntax:
 
 ```ts
-const items: string[] = ['item1', 'item2', 'item3']
+const items: Array<string> = ['item1', 'item2', 'item3']
 items.push('item4') // Add to end
 items[0] // First element
 items.length // Number of elements

exercises/02.arrays/01.solution.array-basics/index.ts

@@ -1,7 +1,7 @@
 // Inventory System
 // Working with basic arrays
 
-const products: string[] = ['Laptop', 'Mouse', 'Keyboard']
+const products: Array<string> = ['Laptop', 'Mouse', 'Keyboard']
 
 products.push('Monitor')
 

exercises/02.arrays/02.solution.array-types/index.ts

@@ -1,7 +1,7 @@
 // Product Inventory
 // Arrays of objects
 
-const products: { name: string; price: number; inStock: boolean }[] = [
+const products: Array<{ name: string; price: number; inStock: boolean }> = [
 	{ name: 'Laptop', price: 999.99, inStock: true },
 	{ name: 'Mouse', price: 29.99, inStock: true },
 	{ name: 'Keyboard', price: 79.99, inStock: false },

exercises/02.arrays/03.solution.iteration/index.ts

@@ -1,7 +1,7 @@
 // Inventory Analysis
 // Iterating and filtering arrays
 
-const products: { name: string; price: number; inStock: boolean }[] = [
+const products: Array<{ name: string; price: number; inStock: boolean }> = [
 	{ name: 'Laptop', price: 999.99, inStock: true },
 	{ name: 'Mouse', price: 29.99, inStock: true },
 	{ name: 'Keyboard', price: 79.99, inStock: false },
@@ -18,7 +18,11 @@ for (const product of products) {
 // Filtering products that are in stock
 // This imperative approach works, but there's a more declarative way
 // using filter() which we'll learn in Exercise 04!
-const inStockProducts: { name: string; price: number; inStock: boolean }[] = []
+const inStockProducts: Array<{
+	name: string
+	price: number
+	inStock: boolean
+}> = []
 for (const product of products) {
 	if (product.inStock) {
 		inStockProducts.push(product)

exercises/02.arrays/FINISHED.mdx

@@ -2,15 +2,15 @@
 
 👨‍💼 Great work with arrays! You now know how to:
 
-- 📚 Create typed arrays with `Type[]` or `Array<Type>`
+- 📚 Create typed arrays with `Array<Type>` (preferred) or `Type[]`
 - ✅ Get type safety when adding elements
 - 🔄 Iterate over arrays with `for...of`
 - 🎭 Use union types for mixed arrays
 
 🦉 Array types shine when combined with object types:
 
 ```ts
-const users: { name: string; age: number }[] = [
+const users: Array<{ name: string; age: number }> = [
 	{ name: 'Alice', age: 30 },
 	{ name: 'Bob', age: 25 },
 ]

exercises/02.arrays/README.mdx

@@ -13,21 +13,36 @@ const names: string[] = ['Alice', 'Bob', 'Charlie']
 TypeScript offers two ways to write array types:
 
 ```ts
-// Square bracket syntax (more common)
+// Square bracket syntax (shorter)
 const numbers: number[] = [1, 2, 3]
 
-// Generic syntax
+// Generic syntax (preferred)
 const numbers: Array<number> = [1, 2, 3]
 ```
 
-Both are identical—use whichever you prefer, but be consistent.
+Both are functionally identical. The square bracket syntax is shorter and you'll
+see it frequently in codebases. However, the generic syntax (`Array<Type>`) is
+preferred for several reasons:
+
+- **Readability**: We read left-to-right, so "Array of numbers" reads more
+  naturally than "numbers... array"
+- **Consistency with readonly**: `ReadonlyArray<string>` vs `readonly string[]`
+- **Union types**: `Array<string | number>` vs `(string | number)[]` (no
+  parentheses needed)
+- **Works better with `keyof`**: Avoids confusing operator precedence issues
+
+For a deeper dive into why generic notation is better, check out
+[Array Types in TypeScript](https://tkdodo.eu/blog/array-types-in-type-script)
+by TkDodo.
+
+We'll use the generic syntax going forward in this workshop.
 
 ## Type Safety with Arrays
 
 TypeScript ensures you only put the right types in arrays:
 
 ```ts
-const numbers: number[] = [1, 2, 3]
+const numbers: Array<number> = [1, 2, 3]
 numbers.push(4) // ✅ OK
 numbers.push('five') // ❌ Error: 'string' not assignable to 'number'
 ```
@@ -38,11 +53,11 @@ You can add elements to arrays in two ways:
 
 ```ts
 // Mutation (modifies the original array)
-const numbers: number[] = [1, 2, 3]
+const numbers: Array<number> = [1, 2, 3]
 numbers.push(4)
 
 // Immutable (creates a new array)
-const numbers: number[] = [1, 2, 3]
+const numbers: Array<number> = [1, 2, 3]
 const moreNumbers = [...numbers, 4]
 ```
 
@@ -63,7 +78,7 @@ state.
 Need different types? Use union types:
 
 ```ts
-const mixed: (string | number)[] = [1, 'two', 3, 'four']
+const mixed: Array<string | number> = [1, 'two', 3, 'four']
 ```
 
 In this exercise, you'll create and work with typed arrays.

exercises/03.tuples/02.problem.tuple-patterns/README.mdx

@@ -23,7 +23,7 @@ const [result, success] = divide(10, 2)
 💰 Return tuple pattern:
 
 ```ts
-function getMinMax(nums: number[]): [number, number] {
+function getMinMax(nums: Array<number>): [number, number] {
 	return [Math.min(...nums), Math.max(...nums)]
 }
 ```

exercises/03.tuples/02.solution.tuple-patterns/index.ts

@@ -6,7 +6,7 @@ function parseNumber(str: string): [number, boolean] {
 	return [num, !isNaN(num)]
 }
 
-function getMinMax(nums: number[]): [number, number] {
+function getMinMax(nums: Array<number>): [number, number] {
 	return [Math.min(...nums), Math.max(...nums)]
 }
 

exercises/03.tuples/README.mdx

@@ -5,7 +5,7 @@ position**. They're like arrays, but more structured.
 
 ```ts
 // Array: any number of strings
-const names: string[] = ['Alice', 'Bob']
+const names: Array<string> = ['Alice', 'Bob']
 
 // Tuple: exactly two elements, string then number
 const person: [string, number] = ['Alice', 30]

exercises/04.array-methods/01.problem.map/README.mdx

@@ -25,7 +25,7 @@ const result = array.map((element) => transformedValue)
 💰 TypeScript infers the result type from what you return:
 
 ```ts
-const names = products.map((p) => p.name) // string[]
+const names = products.map((p) => p.name) // Array<string>
 ```
 
 📜 [MDN - Array.prototype.map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)