Added some exercises to 05

Author: mattpocock

book-content/chapters/04-essential-types-and-annotations.md

@@ -1,5 +1,3 @@
-# 04. Essential Types and Annotations
-
 Now we've covered most of the why of TypeScript, it's time to start with the how. We'll cover key concepts like type annotations and type inference, as well as how to start writing type-safe functions.
 
 It's important to build a solid foundation, as everything you'll learn later builds upon what you'll learn in this chapter.

book-content/chapters/05-unions-literals-and-narrowing.md

@@ -179,6 +179,11 @@ Normally we wouldn't explicitly call the `getUsername` function with `null`, but
 
 Currently, the `username` parameter only accepts a `string` type, and the check for `null` isn't doing anything. Update the function parameter's type so the errors are resolved and the function can handle `null` .
 
+<Exercise
+  title="Exercise 1: `string` or `null`"
+  filePath="/src/018-unions-and-narrowing/053-introduction-to-unions.problem.ts"
+/>
+
 #### Exercise 2: Restricting Function Parameters
 
 Here we have a `move` function that takes in a `direction` of type string, and a `distance` of type number:
@@ -227,6 +232,11 @@ move(
 
 Your challenge is to update the `move` function so that it only accepts the strings `"up"`, `"down"`, `"left"`, and `"right"`. This way, TypeScript will throw an error when we try to pass in any other string.
 
+<Exercise
+  title="Exercise 2: Restricting Function Parameters"
+  filePath="/src/018-unions-and-narrowing/054-literal-types.problem.ts"
+/>
+
 #### Solution 1: `string` or `null`
 
 The solution is to update the `username` parameter to be a union of `string` and `null`:
@@ -441,6 +451,11 @@ it("Should return false for null", () => {
 
 Your task is to rewrite the `validateUsername` function to add narrowing so that the `null` case is handled and the tests all pass.
 
+<Exercise
+  title="Exercise 1: Narrowing with `if` Statements"
+  filePath="/src/018-unions-and-narrowing/059-narrowing-with-if-statements.problem.ts"
+/>
+
 #### Exercise 2: Throwing Errors to Narrow
 
 Here we have a line of code that uses `document.getElementById` to fetch an HTML element, which can return either an `HTMLElement` or `null`:
@@ -463,6 +478,11 @@ type Test = Expect<Equal<typeof appElement, HTMLElement>>;
 
 Your task is to use `throw` to narrow down the type of `appElement` before it's checked by the test.
 
+<Exercise
+  title="Exercise 2: Throwing Errors to Narrow"
+  filePath="/src/018-unions-and-narrowing/062-throwing-errors-to-narrow.problem.ts"
+/>
+
 #### Exercise 3: Using `in` to Narrow
 
 Here we have a `handleResponse` function that takes in a type of `APIResponse`, which is a union of two types of objects.
@@ -525,6 +545,11 @@ Your challenge is to find the correct syntax for narrowing down the types within
 
 The changes should happen inside of the function without modifying any other parts of the code.
 
+<Exercise
+  title="Exercise 3: Using `in` to Narrow"
+  filePath="/src/018-unions-and-narrowing/064-narrowing-with-in-statements.problem.ts"
+/>
+
 #### Solution 1: Narrowing with `if` Statements
 
 There are several different ways to validate the username length.
@@ -921,6 +946,11 @@ console.log(error.message);
 
 Your task is to update the `if` statement to have the proper condition to check if the `error` has a message attribute before logging it. Check the title of the exercise to get a hint... And remember, `Error` is a class.
 
+<Exercise
+  title="Exercise 1: Narrowing Errors with `instanceof`"
+  filePath="/src/018-unions-and-narrowing/065.5-narrowing-with-instanceof-statements.problem.ts"
+/>
+
 #### Exercise 2: Narrowing `unknown` to a Value
 
 Here we have a `parseValue` function that takes in a `value` of type `unknown`:
@@ -962,6 +992,11 @@ it("Should error when anything else is passed in", () => {
 
 Your challenge is to modify the `parseValue` function so that the tests pass and the errors go away. I want you to challenge yourself to do this _only_ by narrowing the type of `value` inside of the function. No changes to the types. This will require a very large `if` statement!
 
+<Exercise
+  title="Exercise 2: Narrowing `unknown` to a Value"
+  filePath="/src/018-unions-and-narrowing/066-narrowing-unknown-to-a-value.problem.ts"
+/>
+
 #### Exercise 3: Reusable Type Guards
 
 Let's imagine that we have two very similar functions, each with a long conditional check to narrow down the type of a value.
@@ -1010,6 +1045,11 @@ Both functions have the same conditional check. This is a great opportunity to c
 
 All the tests are currently passing. Your job is to try to refactor the two functions to use a reusable type guard, and remove the duplicated code. As it turns out, TypeScript makes this a lot easier than you expect.
 
+<Exercise
+  title="Exercise 3: Reusable Type Guards"
+  filePath="/src/018-unions-and-narrowing/066.5-reusable-type-guards.problem.ts"
+/>
+
 #### Solution 1: Narrowing Errors with `instanceof`
 
 The way to solve this challenge is to narrow the `error` using the `instanceof` operator.

src/018-unions-and-narrowing/066.5-reusable-type-guards.problem.ts

@@ -0,0 +1,63 @@
+import { expect, it } from "vitest";
+
+const parseValue = (value: unknown) => {
+  if (
+    typeof value === "object" &&
+    value !== null &&
+    "data" in value &&
+    typeof value.data === "object" &&
+    value.data !== null &&
+    "id" in value.data &&
+    typeof value.data.id === "string"
+  ) {
+    return value.data.id;
+  }
+
+  throw new Error("Parsing error!");
+};
+
+const parseValueAgain = (value: unknown) => {
+  if (
+    typeof value === "object" &&
+    value !== null &&
+    "data" in value &&
+    typeof value.data === "object" &&
+    value.data !== null &&
+    "id" in value.data &&
+    typeof value.data.id === "string"
+  ) {
+    return value.data.id;
+  }
+
+  throw new Error("Parsing error!");
+};
+
+it("parseValue should handle a { data: { id: string } }", () => {
+  const result = parseValue({
+    data: {
+      id: "123",
+    },
+  });
+
+  expect(result).toBe("123");
+});
+
+it("parseValue should error when anything else is passed in", () => {
+  expect(() => parseValue("123")).toThrow("Parsing error!");
+  expect(() => parseValue(123)).toThrow("Parsing error!");
+});
+
+it("parseValueAgain should handle a { data: { id: string } }", () => {
+  const result = parseValueAgain({
+    data: {
+      id: "123",
+    },
+  });
+
+  expect(result).toBe("123");
+});
+
+it("parseValueAgain should error when anything else is passed in", () => {
+  expect(() => parseValueAgain("123")).toThrow("Parsing error!");
+  expect(() => parseValueAgain(123)).toThrow("Parsing error!");
+});

src/018-unions-and-narrowing/066.5-reusable-type-guards.solution.ts

@@ -0,0 +1,60 @@
+import { expect, it } from "vitest";
+
+// TODO - remove return type in 5.5
+const hasDataId = (value: unknown): value is { data: { id: string } } => {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "data" in value &&
+    typeof value.data === "object" &&
+    value.data !== null &&
+    "id" in value.data &&
+    typeof value.data.id === "string"
+  );
+};
+
+const parseValue = (value: unknown) => {
+  if (hasDataId(value)) {
+    return value.data.id;
+  }
+
+  throw new Error("Parsing error!");
+};
+
+const parseValueAgain = (value: unknown) => {
+  if (hasDataId(value)) {
+    return value.data.id;
+  }
+
+  throw new Error("Parsing error!");
+};
+
+it("parseValue should handle a { data: { id: string } }", () => {
+  const result = parseValue({
+    data: {
+      id: "123",
+    },
+  });
+
+  expect(result).toBe("123");
+});
+
+it("parseValue should error when anything else is passed in", () => {
+  expect(() => parseValue("123")).toThrow("Parsing error!");
+  expect(() => parseValue(123)).toThrow("Parsing error!");
+});
+
+it("parseValueAgain should handle a { data: { id: string } }", () => {
+  const result = parseValueAgain({
+    data: {
+      id: "123",
+    },
+  });
+
+  expect(result).toBe("123");
+});
+
+it("parseValueAgain should error when anything else is passed in", () => {
+  expect(() => parseValueAgain("123")).toThrow("Parsing error!");
+  expect(() => parseValueAgain(123)).toThrow("Parsing error!");
+});