Finished generics comments

Author: mattpocock

src/05-generics/31-generic-props.problem.tsx

@@ -1,11 +1,17 @@
 import { ReactNode } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
 
 interface TableProps {
   rows: any[];
-  key: string;
   renderRow: (row: any) => ReactNode;
 }
 
+/**
+ * 1. Here, we have a table component. It takes an array of data and a function
+ * to render each row. The problem is that the type of the data is not
+ * generic. It's just `any`. We want to make it generic so that the type of
+ * the data is inferred from the `rows` prop.
+ */
 export const Table = (props: TableProps) => {
   return (
     <table>
@@ -28,22 +34,11 @@ const data = [
 export const Parent = () => {
   return (
     <div>
+      <Table rows={data} renderRow={(row) => <td>{row.name}</td>} />
       <Table
         rows={data}
-        key="id"
-        renderRow={(row) => <td>{row.name}</td>}
-      ></Table>
-      <Table
-        rows={data}
-        // @ts-expect-error
-        key="doesNotExist"
-        renderRow={(row) => <td>{row.name}</td>}
-      ></Table>
-
-      <Table
-        rows={data}
-        key="id"
         renderRow={(row) => {
+          type test = Expect<Equal<typeof row, { id: number; name: string }>>;
           return (
             <td>
               {

src/05-generics/31-generic-props.solution.tsx

@@ -1,11 +1,16 @@
 import { ReactNode } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
 
 interface TableProps<T> {
   rows: T[];
-  key: keyof T;
   renderRow: (row: T) => ReactNode;
 }
 
+/**
+ * The solution is to add a type argument to the function, then
+ * use that type argument in the type of the `rows` prop and the
+ * `renderRow` function.
+ */
 export const Table = <T,>(props: TableProps<T>) => {
   return (
     <table>
@@ -28,22 +33,11 @@ const data = [
 export const Parent = () => {
   return (
     <div>
+      <Table rows={data} renderRow={(row) => <td>{row.name}</td>} />
       <Table
         rows={data}
-        key="id"
-        renderRow={(row) => <td>{row.name}</td>}
-      ></Table>
-      <Table
-        rows={data}
-        // @ts-expect-error
-        key="doesNotExist"
-        renderRow={(row) => <td>{row.name}</td>}
-      ></Table>
-
-      <Table
-        rows={data}
-        key="id"
         renderRow={(row) => {
+          type test = Expect<Equal<typeof row, { id: number; name: string }>>;
           return (
             <td>
               {

src/05-generics/32-generic-hooks.problem.ts

@@ -1,6 +1,13 @@
 import { useState } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
+/**
+ * 1. In this exercise, we want to create a version of the useState
+ * hook that slightly modifies the API - returning it as an object
+ * instead of a tuple.
+ *
+ * There are _many_ different solutions - but they all involve generics.
+ */
 export const useStateAsObject = (initial: any) => {
   const [value, set] = useState(initial);
 

src/05-generics/32-generic-hooks.solution.1.ts

@@ -1,6 +1,13 @@
 import { useState } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
+/**
+ * 1. Take a look at each solution, noting the differences between each.
+ * With some, you might need to do some 'spot the diference' to see
+ * what's changed.
+ *
+ * 2. Which solution do you think is best? Why?
+ */
 export const useStateAsObject = <T>(initial: T) => {
   const [value, set] = useState(initial);
 

src/05-generics/37-generic-localstorage-hook.problem.ts renamed to src/05-generics/33-generic-localstorage-hook.problem.ts

@@ -1,6 +1,19 @@
 import { it } from "vitest";
 import { Equal, Expect } from "../helpers/type-utils";
 
+/**
+ * In this exercise, we want to create a generic useLocalStorage hook
+ * that allows us to store and retrieve values in localStorage.
+ *
+ * The way we're going to do this is by asking users to pass in type
+ * arguments, as below:
+ *
+ * const user = useLocalStorage<{ name: string }>("user");
+ *
+ * user.set("matt", { name: "Matt" });
+ *
+ * 1. Figure out a way to make this work using generics.
+ */
 export const useLocalStorage = (prefix: string) => {
   return {
     get: (key: string) => {

src/05-generics/37-generic-localstorage-hook.solution.ts renamed to src/05-generics/33-generic-localstorage-hook.solution.ts

@@ -0,0 +1,55 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface ButtonGroupProps {
+  buttons: {
+    value: string;
+    label: string;
+  }[];
+  onClick: (value: string) => void;
+}
+
+/**
+ * In this exercise, we have a component called ButtonGroup. It takes an array
+ * of buttons and a function to call when a button is clicked.
+ *
+ * We want to improve the type of the onClick function so that the value passed
+ * to it is inferred from the buttons array.
+ *
+ * 1. Try to solve this problem using generics.
+ */
+const ButtonGroup = (props: ButtonGroupProps) => {
+  return (
+    <div>
+      {props.buttons.map((button) => {
+        return (
+          <button
+            key={button.value}
+            onClick={() => {
+              props.onClick(button.value);
+            }}
+          >
+            {button.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+<>
+  <ButtonGroup
+    onClick={(value) => {
+      type test = Expect<Equal<typeof value, "add" | "delete">>;
+    }}
+    buttons={[
+      {
+        value: "add",
+        label: "Add",
+      },
+      {
+        value: "delete",
+        label: "Delete",
+      },
+    ]}
+  ></ButtonGroup>
+</>;

src/05-generics/34-button-group.problem.tsx

@@ -1,27 +1,34 @@
 import { Equal, Expect } from "../helpers/type-utils";
 
-interface ButtonGroupProps<TValue extends string> {
-  buttons: {
-    value: TValue;
-    label: string;
-  }[];
-  onClick: (value: TValue) => void;
+interface ButtonGroupProps<TButtons extends string[]> {
+  buttons: TButtons;
+  onClick: (value: TButtons[number]) => void;
 }
 
-const ButtonGroup = <TValue extends string>(
-  props: ButtonGroupProps<TValue>,
+/**
+ * Here, we've changed the type of the `buttons` prop to be an array of strings.
+ * But the inference has broken in the ButtonGroup component below!
+ *
+ * See if you can find a way to fix it. A 'const' annotation may help:
+ *
+ * https://www.totaltypescript.com/const-type-parameters
+ *
+ * OR you might be able to fix it by changing the type of the type argument.
+ */
+const ButtonGroup = <TButtons extends string[]>(
+  props: ButtonGroupProps<TButtons>,
 ) => {
   return (
     <div>
       {props.buttons.map((button) => {
         return (
           <button
-            key={button.value}
+            key={button}
             onClick={() => {
-              props.onClick(button.value);
+              props.onClick(button);
             }}
           >
-            {button.label}
+            {button}
           </button>
         );
       })}
@@ -32,17 +39,12 @@ const ButtonGroup = <TValue extends string>(
 <>
   <ButtonGroup
     onClick={(value) => {
+      /**
+       * Instead of inferring the type of `value` to be "add" | "delete", it's
+       * now inferred to be `string`.
+       */
       type test = Expect<Equal<typeof value, "add" | "delete">>;
     }}
-    buttons={[
-      {
-        value: "add",
-        label: "Add",
-      },
-      {
-        value: "delete",
-        label: "Delete",
-      },
-    ]}
+    buttons={["add", "delete"]}
   ></ButtonGroup>
 </>;

src/05-generics/35-button-group.solution.tsx renamed to src/05-generics/34-button-group.solution.tsx

@@ -1,7 +1,7 @@
 import { lazy, Suspense, useMemo } from "react";
 
 type Props = {
-  loader: () => Promise<{ default: any }>;
+  loader: unknown;
 };
 
 /**
@@ -10,14 +10,16 @@ type Props = {
  *
  * But it's not typed correctly, and it's not generic enough.
  * Fix the typing errors, and make it generic enough to support any component.
- * Hint - React.ComponentProps will come in handy!
+ *
+ * Hint - React.ComponentProps will come in handy! The solution also includes
+ * one 'as any'.
  */
 function LazyLoad({ loader, ...props }: Props) {
   const LazyComponent = useMemo(() => lazy(loader), [loader]);
 
   return (
     <Suspense fallback={"Loading..."}>
-      <LazyComponent {...(props as any)} />
+      <LazyComponent {...props} />
     </Suspense>
   );
 }

src/05-generics/35-button-group.problem.tsx

@@ -1,3 +1,19 @@
+/**
+ * In this exercise, we'll look at an example where generics are NOT
+ * needed.
+ *
+ * 1. Take a look at the ModalProps type. Try to figure out what's
+ * going on in the type.
+ *
+ * Notice what type gets returned if you type:
+ *
+ * type Example = ModalProps<'with-button'>;
+ * type Example2 = ModalProps<'without-button'>;
+ *
+ * 2. There's a way of writing this type (and the component!) without
+ * generics that's much simpler. Try to figure out how to do that.
+ */
+
 export type ModalProps<TVariant extends PossibleVariants> = {
   isOpen: boolean;
   variant: TVariant;

src/05-generics/36-button-group.solution.1.tsx renamed to src/05-generics/35-button-group.solution.1.tsx

@@ -1,3 +1,10 @@
+/**
+ * Yep, a discriminated union is the way to go here. Instead of
+ * using a generic type (with a conditional type!), we can use
+ * a discriminated union to make sure that the correct props
+ * are passed in for each variant.
+ */
+
 export type ModalProps =
   | {
       isOpen: boolean;