add object type aliases and stuff

Author: kentcdodds

exercises/01.objects/01.problem.object-literals/README.mdx

@@ -8,7 +8,7 @@ objects with proper types.
 1. Create a `user` object with `name`, `age`, and `email` properties
 2. Create a second user object using the same structure
 
-🦺 Object type syntax (We'll cover this in the Type Safety workshop later):
+🦺 Object type syntax (we'll name these types in a later step):
 
 ```ts
 const obj: { prop1: Type1; prop2: Type2 } = {

exercises/01.objects/01.problem.object-literals/index.ts

@@ -12,4 +12,4 @@
 // console.log(`Admin: ${admin.name}, Age: ${admin.age}`)
 
 // 🐨 Export your variables so we can verify your work
-// 💰 export { user, admin }
+// export { user, admin }

exercises/01.objects/02.problem.property-access/index.ts

@@ -9,10 +9,8 @@ const product = {
 }
 
 // 🐨 Log the product name using dot notation
-// 💰 console.log(product.name)
 
 // 🐨 Log the product price using bracket notation
-// 💰 console.log(product['price'])
 
 // 🐨 Create a function `formatProduct` that takes a product object
 // and returns a string like "TypeScript Handbook - $29.99"
@@ -24,4 +22,4 @@ const product = {
 // console.log(formatProduct(product))
 
 // 🐨 Export your variables and functions so we can verify your work
-// 💰 export { product, formatProduct }
+// export { product, formatProduct }

exercises/01.objects/03.problem.object-types/README.mdx

@@ -0,0 +1,14 @@
+# Object Types
+
+👨‍💼 We're repeating the same object shape in a few places. Let's give that
+shape a name so we can reuse it.
+
+🦺 A **type alias** lets us name an object type. We'll go deeper on type aliases
+in the Type Safety workshop, but this small intro will make later steps easier.
+
+🐨 Open <InlineFile file="index.ts" /> and:
+
+1. Create a `Task` type alias with `id`, `title`, and `completed`
+2. Create two task objects using that type
+
+📜 [TypeScript Handbook - Type Aliases](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-aliases)

exercises/01.objects/03.problem.object-types/index.ts

@@ -0,0 +1,15 @@
+// Task Board
+// Naming object types
+
+// 🐨 Create a type called `Task` with:
+// - id: number
+// - title: string
+// - completed: boolean
+// 💰 type Task = { ... }
+
+// 🐨 Create a `firstTask` and `secondTask` using the Task type
+// - firstTask: id 1, title "Write tests", completed false
+// - secondTask: id 2, title "Ship release", completed true
+
+// 🐨 Export your variables so we can verify your work
+// export { firstTask, secondTask }

exercises/01.objects/03.problem.object-types/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "exercises_01.objects_03.problem.object-types",
+  "type": "module",
+  "scripts": {
+    "start": "npx @kentcdodds/log-module@latest ./index.ts",
+    "test": "node --test index.test.ts"
+  }
+}

exercises/01.objects/03.solution.object-types/README.mdx

@@ -0,0 +1,7 @@
+# Object Types
+
+👨‍💼 Nice work! You created a reusable object type with a `type` alias and used
+it to build multiple tasks.
+
+🦉 We'll go deeper on type aliases (and when to prefer them) in the Type Safety
+workshop, but naming object shapes already makes your code easier to read.

exercises/01.objects/03.solution.object-types/index.test.ts

@@ -0,0 +1,33 @@
+import assert from 'node:assert/strict'
+import { test } from 'node:test'
+import * as solution from './index.ts'
+
+await test('firstTask is exported', () => {
+	assert.ok(
+		'firstTask' in solution,
+		'🚨 Make sure you export "firstTask" - add: export { firstTask, ... }',
+	)
+})
+
+await test('firstTask has expected values', () => {
+	assert.deepStrictEqual(
+		solution.firstTask,
+		{ id: 1, title: 'Write tests', completed: false },
+		'🚨 firstTask should match the required id, title, and completed values',
+	)
+})
+
+await test('secondTask is exported', () => {
+	assert.ok(
+		'secondTask' in solution,
+		'🚨 Make sure you export "secondTask" - add: export { firstTask, secondTask, ... }',
+	)
+})
+
+await test('secondTask has expected values', () => {
+	assert.deepStrictEqual(
+		solution.secondTask,
+		{ id: 2, title: 'Ship release', completed: true },
+		'🚨 secondTask should match the required id, title, and completed values',
+	)
+})

exercises/01.objects/03.solution.object-types/index.ts

@@ -0,0 +1,22 @@
+// Task Board
+// Naming object types
+
+type Task = {
+	id: number
+	title: string
+	completed: boolean
+}
+
+const firstTask: Task = {
+	id: 1,
+	title: 'Write tests',
+	completed: false,
+}
+
+const secondTask: Task = {
+	id: 2,
+	title: 'Ship release',
+	completed: true,
+}
+
+export { firstTask, secondTask }

exercises/01.objects/03.solution.object-types/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "exercises_01.objects_03.solution.object-types",
+  "type": "module",
+  "scripts": {
+    "start": "npx @kentcdodds/log-module@latest ./index.ts",
+    "test": "node --test index.test.ts"
+  }
+}