Added section on automatically inferred type predicates for 5.5

Author: mattpocock

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

@@ -904,6 +904,54 @@ 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 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.
+
+Here's the first function:
+
+```typescript
+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!");
+};
+```
+
+And here's the second function:
+
+```typescript
+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!");
+};
+```
+
+Both functions have the same conditional check. This is a great opportunity to create a reusable type guard.
+
+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.
+
 #### Solution 1: Narrowing Errors with `instanceof`
 
 The way to solve this challenge is to narrow the `error` using the `instanceof` operator.
@@ -1034,6 +1082,59 @@ Thanks to this huge conditional, our tests pass, and our error messages are gone
 
 This is usually _not_ how you'd want to write your code. It's a bit of a mess. You could use a library like [Zod](https://zod.dev) to do this with a much nicer API. But it's a great way to understand how `unknown` and narrowing work in TypeScript.
 
+#### Solution 3: Reusable Type Guards
+
+The first step is to create a function called `hasDataId` that captures the conditional check:
+
+```typescript
+const hasDataId = (value) => {
+  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"
+  );
+};
+```
+
+We haven't given `value` a type here - `unknown` makes sense, because it could be anything.
+
+Now we can refactor the two functions to use this type guard:
+
+```typescript
+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!");
+};
+```
+
+Incredibly, this is all TypeScript needs to be able to narrow the type of `value` inside of the `if` statement. It's smart enough to understand that `hasDataId` being called on `value` ensures that `value` has a `data` property with an `id` property.
+
+We can observe this by hovering over `hasDataId`:
+
+```typescript
+// hovering over `hasDataId` shows:
+const hasDataId: (value: unknown) => value is { data: { id: string } };
+```
+
+This return type we're seeing is a type predicate. It's a way of saying "if this function returns `true`, then the type of the value is `{ data: { id: string } }`".
+
+We'll look at authoring our own type predicates in one of the later chapters in the book - but it's very useful that TypeScript infers its own.
+
 ## Discriminated Unions
 
 In this section we'll look at a common pattern TypeScript developers use to structure their code. It's called a 'discriminated union'.

package.json

@@ -568,7 +568,27 @@
     "e-181.2": "tt-cli run 181.2",
     "s-181.2": "tt-cli run 181.2 --solution",
     "e-181.4": "tt-cli run 181.4",
-    "s-181.4": "tt-cli run 181.4 --solution"
+    "s-181.4": "tt-cli run 181.4 --solution",
+    "e-104.5": "tt-cli run 104.5",
+    "s-104.5": "tt-cli run 104.5 --solution",
+    "e-082.5": "tt-cli run 082.5",
+    "s-082.5": "tt-cli run 082.5 --solution",
+    "e-086.5": "tt-cli run 086.5",
+    "s-086.5": "tt-cli run 086.5 --solution",
+    "e-080.5": "tt-cli run 080.5",
+    "s-080.5": "tt-cli run 080.5 --solution",
+    "e-154.8": "tt-cli run 154.8",
+    "s-154.8": "tt-cli run 154.8 --solution",
+    "e-154.9": "tt-cli run 154.9",
+    "s-154.9": "tt-cli run 154.9 --solution",
+    "e-196.5": "tt-cli run 196.5",
+    "s-196.5": "tt-cli run 196.5 --solution",
+    "e-202.5": "tt-cli run 202.5",
+    "s-202.5": "tt-cli run 202.5 --solution",
+    "e-202.6": "tt-cli run 202.6",
+    "s-202.6": "tt-cli run 202.6 --solution",
+    "e-202.7": "tt-cli run 202.7",
+    "s-202.7": "tt-cli run 202.7 --solution"
   },
   "dependencies": {
     "@tanstack/react-query": "^4.29.12",

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

@@ -0,0 +1,72 @@
+import { Equal, Expect } from "@total-typescript/helpers";
+import { describe, 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!");
+};
+
+describe("parseValue", () => {
+  it("Should handle a { data: { id: string } }", () => {
+    const result = parseValue({
+      data: {
+        id: "123",
+      },
+    });
+
+    type test = Expect<Equal<typeof result, string>>;
+
+    expect(result).toBe("123");
+  });
+
+  it("Should error when anything else is passed in", () => {
+    expect(() => parseValue("123")).toThrow("Parsing error!");
+    expect(() => parseValue(123)).toThrow("Parsing error!");
+  });
+});
+
+describe("parseValueAgain", () => {
+  it("Should handle a { data: { id: string } }", () => {
+    const result = parseValueAgain({
+      data: {
+        id: "123",
+      },
+    });
+
+    type test = Expect<Equal<typeof result, string>>;
+
+    expect(result).toBe("123");
+  });
+
+  it("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/072.5-reusable-type-guards.solution.ts

@@ -0,0 +1,74 @@
+import { Equal, Expect } from "@total-typescript/helpers";
+import { describe, expect, it } from "vitest";
+
+const hasDataAndId = (
+  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 (hasDataAndId(value)) {
+    return value.data.id;
+  }
+
+  throw new Error("Parsing error!");
+};
+
+const parseValueAgain = (value: unknown) => {
+  if (hasDataAndId(value)) {
+    return value.data.id;
+  }
+
+  throw new Error("Parsing error!");
+};
+
+describe("parseValue", () => {
+  it("Should handle a { data: { id: string } }", () => {
+    const result = parseValue({
+      data: {
+        id: "123",
+      },
+    });
+
+    type test = Expect<Equal<typeof result, string>>;
+
+    expect(result).toBe("123");
+  });
+
+  it("Should error when anything else is passed in", () => {
+    expect(() => parseValue("123")).toThrow("Parsing error!");
+    expect(() => parseValue(123)).toThrow("Parsing error!");
+  });
+});
+
+describe("parseValueAgain", () => {
+  it("Should handle a { data: { id: string } }", () => {
+    const result = parseValueAgain({
+      data: {
+        id: "123",
+      },
+    });
+
+    type test = Expect<Equal<typeof result, string>>;
+
+    expect(result).toBe("123");
+  });
+
+  it("Should error when anything else is passed in", () => {
+    expect(() => parseValueAgain("123")).toThrow("Parsing error!");
+    expect(() => parseValueAgain(123)).toThrow("Parsing error!");
+  });
+});