Added exercises to 02 and 04

Author: mattpocock

book-content/chapters/02-ide-superpowers.md

@@ -1,5 +1,3 @@
-# 02. IDE Superpowers
-
 TypeScript works the same no matter what IDE you use, but for this book we'll assume you're using Visual Studio Code (VS Code).
 
 When you open VS Code, the TypeScript server starts in the background. It will be active as long as you have a TypeScript file open.
@@ -71,6 +69,8 @@ acceptsObj({
 
 Practice using the autocomplete shortcut to fill in the object when calling `acceptsObj`.
 
+<Exercise title="Exercise 1: Autocomplete" filePath="/src/016.5-ide-superpowers/044-manually-triggering-autocomplete.problem.ts" />
+
 #### Solution 1: Autocomplete
 
 When you hit `Ctrl + Space` inside the object, you'll see a list of the possible properties based on the `MyObj` type:
@@ -282,6 +282,8 @@ let element = document.getElementById(12);
 
 How can hovering help to determine what argument `document.getElementById` actually requires? And for a bonus point, what type is `element`?
 
+<Exercise title="Exercise 1: Hovering a Function Call" filePath="/src/016.5-ide-superpowers/041-hovering-a-function-call.problem.ts" />
+
 #### Solution 1: Hovering a Function Call
 
 First of all, we can hover over the red squiggly error itself. In this case, hovering over `12`, we get the following error message:
@@ -361,6 +363,8 @@ In order to understand what this function does, you'd have to read the code.
 
 Add some documentation to the function so that when you hover over it, you can read a description of what it does.
 
+<Exercise title="Exercise 1: Adding Documentation For Hovers" filePath="/src/016.5-ide-superpowers/042-adding-tsdoc-comments-for-hovers.problem.ts" />
+
 #### Solution 1: Adding Documentation for Hovers
 
 In this case, we'll specify that the function "Adds two numbers together". We can also use an `@example` tag to show an example of how the function is used:
@@ -508,6 +512,8 @@ Highlight a variable, line, or entire code block then hit `Command + .` to open
 
 Experiment with different options to see how they affect the example function.
 
+<Exercise title="Exercise 1: Quick Fix Refactoring" filePath="/src/016.5-ide-superpowers/050-refactor.problem.ts" />
+
 ### Solution 1: Quick Fix Refactoring
 
 The Quick Fix menu will show different refactoring options depending on where your cursor is when you open it.

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

@@ -285,6 +285,11 @@ Finally, we can see that our `test` result has an error because the `result` is
 
 Your challenge is to consider how we can change the types to make the errors go away, and to ensure that `result` is a `number`. You can hover over `result` to check it.
 
+<Exercise
+  title="Exercise 1: Basic Types with Function Parameters"
+  filePath="/src/015-essential-types-and-annotations/020-basic-types-with-function-parameters.problem.ts"
+/>
+
 #### Exercise 2: Annotating Empty Parameters
 
 Here we have a `concatTwoStrings` function that is similar in shape to the `add` function. It takes two parameters, `a` and `b`, and returns a string.
@@ -317,6 +322,11 @@ type test = Expect<Equal<typeof result, string>>;
 
 Your job is to add some function paramater annotations to the `concatTwoStrings` function to make the errors go away.
 
+<Exercise
+  title="Exercise 2: Annotating Empty Parameters"
+  filePath="/src/015-essential-types-and-annotations/021-annotating-empty-parameters.problem.ts"
+/>
+
 #### Exercise 3: The Basic Types
 
 As we've seen, TypeScript will show errors when types don't match.
@@ -352,6 +362,11 @@ Type 'boolean' is not assignable to type 'string'.
 
 Change the types of the annotations on each variable to make the errors go away.
 
+<Exercise
+  title="Exercise 3: The Basic Types"
+  filePath="/src/015-essential-types-and-annotations/022-all-types.problem.ts"
+/>
+
 #### Exercise 4: The `any` Type
 
 Here is a function called `handleFormData` that accepts an `e` typed as `any`. The function prevents the default form submission behavior, then creates an object from the form data and returns it:
@@ -410,6 +425,11 @@ Why is this error happening? Why isn't TypeScript giving us an error here?
 
 I'll give you a clue. I've hidden a nasty typo in there. Can you fix it?
 
+<Exercise
+  title="Exercise 4: The `any` Type"
+  filePath="/src/015-essential-types-and-annotations/032.5-any.problem.ts"
+/>
+
 #### Solution 1: Basic Types with Function Parameters
 
 Common sense tells us that the `boolean`s in the `add` function should be replaced with some sort of `number` type.
@@ -598,6 +618,11 @@ We can tell from the `concatName` function body that it expects `user.first` and
 
 How could we type the `user` parameter to ensure that it has these properties and that they are of the correct type?
 
+<Exercise
+  title="Exercise 1: Object Literal Types"
+  filePath="/src/015-essential-types-and-annotations/025-object-literal-types.problem.ts"
+/>
+
 #### Exercise 2: Optional Property Types
 
 Here's a version of the `concatName` function that has been updated to return just the first name if a last name wasn't provided:
@@ -645,6 +670,11 @@ The error tells us that we are missing a property, but the error is incorrect. W
 
 How would you update this function to fix the errors?
 
+<Exercise
+  title="Exercise 2: Optional Property Types"
+  filePath="/src/015-essential-types-and-annotations/026-optional-property-types.problem.ts"
+/>
+
 #### Solution 1: Object Literal Types
 
 In order to annotate the `user` parameter as an object, we can use the curly brace syntax `{}`.
@@ -829,6 +859,11 @@ Even though everything is working as expected, there's an opportunity for refact
 
 How could you use the `type` keyword to make this code more readable?
 
+<Exercise
+  title="Exercise 1: The `type` Keyword"
+  filePath="/src/015-essential-types-and-annotations/027-type-keyword.problem.ts"
+/>
+
 #### Solution 1: The `type` Keyword
 
 You can use the `type` keyword to create a `Rectangle` type with `width` and `height` properties:
@@ -1039,6 +1074,11 @@ As the error message points out, there is not currently a property called `items
 
 How would you fix this error?
 
+<Exercise
+  title="Exercise 1: Array Type"
+  filePath="/src/015-essential-types-and-annotations/028-arrays.problem.ts"
+/>
+
 #### Exercise 2: Arrays of Objects
 
 Consider this `processRecipe` function which takes in a `Recipe` type:
@@ -1074,6 +1114,11 @@ Object literal may only specify known properties, and 'ingredients' does not exi
 
 By combining what you've seen with typing object properties and working with arrays, how would you specify ingredients for the `Recipe` type?
 
+<Exercise
+  title="Exercise 2: Arrays of Objects"
+  filePath="/src/015-essential-types-and-annotations/029-arrays-of-objects.problem.ts"
+/>
+
 #### Exercise 3: Tuples
 
 Here we have a `setRange` function that takes in an array of numbers:
@@ -1127,6 +1172,11 @@ setRange([0, 10, 20]);
 
 The code for the `setRange` function needs an updated type annotation to specify that it only accepts a tuple of two numbers.
 
+<Exercise
+  title="Exercise 3: Tuples"
+  filePath="/src/015-essential-types-and-annotations/031-tuples.problem.ts"
+/>
+
 #### Exercise 4: Optional Members of Tuples
 
 This `goToLocation` function takes in an array of coordinates. Each coordinate has a `latitude` and `longitude`, which are both numbers, as well as an optional `elevation` which is also a number:
@@ -1153,6 +1203,11 @@ const goToLocation = (coordinates: Array<number>) => {
 
 Your challenge is to update the type annotation for the `coordinates` parameter to specify that it should be a tuple of three numbers, where the third number is optional.
 
+<Exercise
+  title="Exercise 4: Optional Members of Tuples"
+  filePath="/src/015-essential-types-and-annotations/032-optional-members-of-tuples.problem.ts"
+/>
+
 #### Solution 1: Array Type
 
 For the `ShoppingCart` example, defining an array of `item` strings would looks like this when using the square bracket syntax:
@@ -1433,6 +1488,11 @@ new () => Map<any, any> (+3 overloads)
 
 How would we type the `userMap` so the key must be a number and the value is an object with `name` and `age` properties?
 
+<Exercise
+  title="Exercise 1: Passing Types to Map"
+  filePath="/src/015-essential-types-and-annotations/036-pass-types-to-map.problem.ts"
+/>
+
 #### Exercise 2: `JSON.parse()` Can't Receive Type Arguments
 
 Consider the following code, which uses `JSON.parse` to parse some JSON:
@@ -1485,6 +1545,11 @@ The test errors tell us that the type of `parsed` is not what we expect. The pro
 
 Why this is happening? What would be an different way to correct these type errors?
 
+<Exercise
+  title="Exercise 2: `JSON.parse()` Can't Receive Type Arguments"
+  filePath="/src/015-essential-types-and-annotations/037-json-parse-cant-receive-type-arguments.problem.ts"
+/>
+
 #### Solution 1: Passing Types to Map
 
 There are a few different ways to solve this problem, but we'll start with the most straightforward one.
@@ -1848,6 +1913,11 @@ const result2 = concatName("John");
 
 Try to use an optional parameter annotation to fix the error.
 
+<Exercise
+  title="Exercise 1: Optional Function Parameters"
+  filePath="/src/015-essential-types-and-annotations/023-optional-function-parameters.problem.ts"
+/>
+
 #### Exercise 2: Default Function Parameters
 
 Here we have the same `concatName` function as before, where the `last` name is optional:
@@ -1904,6 +1974,11 @@ expect(result).toEqual("John Pocock");
 
 Update the `concatName` function to use `Pocock` as the default last name if one is not provided.
 
+<Exercise
+  title="Exercise 2: Default Function Parameters"
+  filePath="/src/015-essential-types-and-annotations/024-default-function-parameters.problem.ts"
+/>
+
 #### Exercise 3: Rest Parameters
 
 Here we have a `concatenate` function that takes in a variable number of strings:
@@ -1931,6 +2006,11 @@ The test passes, but there's an error on the `...strings` rest parameter.
 
 How would you update the rest parameter to specify that it should be an array of strings?
 
+<Exercise
+  title="Exercise 3: Rest Parameters"
+  filePath="/src/015-essential-types-and-annotations/030-rest-parameters.problem.ts"
+/>
+
 #### Exercise 4: Function Types
 
 Here, we have a `modifyUser` function that takes in an array of `users`, an `id` of the user that we want to change, and a `makeChange` function that makes that change:
@@ -2003,6 +2083,11 @@ modifyUser(
 
 How would you type `makeChange` as a function takes in a `User` and returns a `User`?
 
+<Exercise
+  title="Exercise 4: Function Types"
+  filePath="/src/015-essential-types-and-annotations/033-function-types.problem.ts"
+/>
+
 #### Exercise 5: Functions Returning `void`
 
 Here we explore a classic web development example.
@@ -2042,6 +2127,11 @@ This is triggering our `@ts-expect-error` directive.
 
 How should `addClickEventListener` be typed so that each error is resolved?
 
+<Exercise
+  title="Exercise 5: Functions Returning `void`"
+  filePath="/src/015-essential-types-and-annotations/034-functions-returning-void.problem.ts"
+/>
+
 #### Exercise 6: `void` vs `undefined`
 
 We've got a function that accepts a callback and calls it. The callback doesn't return anything, so we've typed it as `() => undefined`:
@@ -2070,6 +2160,11 @@ acceptsCallback(returnString);
 
 Why is this happening? Can we alter the type of `acceptsCallback` to fix this error?
 
+<Exercise
+  title="Exercise 6: `void` vs `undefined`"
+  filePath="/src/015-essential-types-and-annotations/034.5-void-vs-undefined.problem.ts"
+/>
+
 #### Exercise 7: Typing Async Functions
 
 This `fetchData` function awaits the `response` from a call to `fetch`, then gets the `data` by calling `response.json()`:
@@ -2139,6 +2234,11 @@ How can we type `data` as a number without changing the calls to `fetch` or `res
 
 There are two possible solutions here.
 
+<Exercise
+  title="Exercise 7: Typing Async Functions"
+  filePath="/src/015-essential-types-and-annotations/038-type-async-functions.problem.ts"
+/>
+
 #### Solution 1: Optional Function Parameters
 
 By adding a question mark `?` to the end of a parameter, it will be marked as optional:

src/015-essential-types-and-annotations/034.5-void-vs-undefined.problem.ts

@@ -0,0 +1,9 @@
+const acceptsCallback = (callback: () => undefined) => {
+  callback();
+};
+
+const returnString = () => {
+  return "Hello!";
+};
+
+acceptsCallback(returnString);

src/015-essential-types-and-annotations/034.5-void-vs-undefined.solution.ts

@@ -0,0 +1,9 @@
+const acceptsCallback = (callback: () => void) => {
+  callback();
+};
+
+const returnString = () => {
+  return "Hello!";
+};
+
+acceptsCallback(returnString);