WIP

Author: mattpocock

src/05-generics/33.5-type-helpers.problem.tsx

@@ -0,0 +1,50 @@
+import { ReactNode } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface TableProps {
+  rows: any[];
+  renderRow: (row: any) => ReactNode;
+}
+
+export class Table extends React.Component<TableProps> {
+  render(): ReactNode {
+    return (
+      <table>
+        <tbody>
+          {this.props.rows.map((row) => (
+            <tr>{this.props.renderRow(row)}</tr>
+          ))}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+const data = [
+  {
+    id: 1,
+    name: "John",
+  },
+];
+
+export const Parent = () => {
+  return (
+    <div>
+      <Table rows={data} renderRow={(row) => <td>{row.name}</td>} />
+      <Table
+        rows={data}
+        renderRow={(row) => {
+          type test = Expect<Equal<typeof row, { id: number; name: string }>>;
+          return (
+            <td>
+              {
+                // @ts-expect-error
+                row.doesNotExist
+              }
+            </td>
+          );
+        }}
+      ></Table>
+    </div>
+  );
+};

src/05-generics/33.6-type-helpers-with-constraints.problem.tsx

@@ -0,0 +1,50 @@
+import { ReactNode } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface TableProps<T> {
+  rows: T[];
+  renderRow: (row: T) => ReactNode;
+}
+
+export class Table<T> extends React.Component<TableProps<T>> {
+  render(): ReactNode {
+    return (
+      <table>
+        <tbody>
+          {this.props.rows.map((row) => (
+            <tr>{this.props.renderRow(row)}</tr>
+          ))}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+const data = [
+  {
+    id: 1,
+    name: "John",
+  },
+];
+
+export const Parent = () => {
+  return (
+    <div>
+      <Table rows={data} renderRow={(row) => <td>{row.name}</td>} />
+      <Table
+        rows={data}
+        renderRow={(row) => {
+          type test = Expect<Equal<typeof row, { id: number; name: string }>>;
+          return (
+            <td>
+              {
+                // @ts-expect-error
+                row.doesNotExist
+              }
+            </td>
+          );
+        }}
+      ></Table>
+    </div>
+  );
+};

src/05-generics/35.5-generic-class-components.problem.tsx

@@ -1,10 +1,12 @@
 import { Equal, Expect } from "../helpers/type-utils";
 
+interface Button {
+  value: string;
+  label: string;
+}
+
 interface ButtonGroupProps {
-  buttons: {
-    value: string;
-    label: string;
-  }[];
+  buttons: Button[];
   onClick: (value: string) => void;
 }
 

src/05-generics/35.5-generic-class-components.solution.tsx

@@ -1,10 +1,12 @@
 import { Equal, Expect } from "../helpers/type-utils";
 
+interface Button<TValue extends string> {
+  value: TValue;
+  label: string;
+}
+
 interface ButtonGroupProps<TValue extends string> {
-  buttons: {
-    value: TValue;
-    label: string;
-  }[];
+  buttons: Button<TValue>[];
   onClick: (value: TValue) => void;
 }
 

src/05-generics/37-button-group.problem.tsx renamed to src/05-generics/37-generic-inference-through-multiple-helpers.problem.tsx

@@ -0,0 +1,74 @@
+import { createUser } from "fake-external-lib";
+import { useState } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+type Mutation = (...args: any[]) => Promise<any>;
+
+interface UseMutationReturn {
+  mutate: Mutation;
+  isLoading: boolean;
+}
+
+interface UseMutationOptions {
+  mutation: Mutation;
+}
+
+export const useMutation = (opts: UseMutationOptions): UseMutationReturn => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return {
+    mutate: async (...args) => {
+      setIsLoading(true);
+
+      try {
+        const result = await opts.mutation(...args);
+        return result;
+      } catch (e) {
+        throw e;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    isLoading,
+  };
+};
+
+const mutation = useMutation({
+  mutation: createUser,
+});
+
+mutation.mutate({ name: "John Doe", email: "[email protected]" });
+
+// @ts-expect-error email missing!
+mutation.mutate({ name: "John Doe" });
+
+mutation.mutate(
+  {
+    name: "John Doe",
+    email: "[email protected]",
+  },
+  {
+    throwOnError: true,
+    // @ts-expect-error extra prop
+    extra: "oh dear",
+  },
+);
+
+type test = [
+  Expect<Equal<typeof mutation.isLoading, boolean>>,
+  Expect<
+    Equal<
+      typeof mutation.mutate,
+      (
+        user: { name: string; email: string },
+        opts?: {
+          throwOnError?: boolean;
+        },
+      ) => Promise<{
+        id: string;
+        name: string;
+        email: string;
+      }>
+    >
+  >,
+];

src/05-generics/37-button-group.solution.tsx renamed to src/05-generics/37-generic-inference-through-multiple-helpers.solution.tsx

@@ -0,0 +1,78 @@
+import { createUser } from "fake-external-lib";
+import { useState } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+type Mutation<TArgs extends any[], TResult> = (
+  ...args: TArgs
+) => Promise<TResult>;
+
+interface UseMutationReturn<TArgs extends any[], TResult> {
+  mutate: Mutation<TArgs, TResult>;
+  isLoading: boolean;
+}
+
+interface UseMutationOptions<TArgs extends any[], TResult> {
+  mutation: Mutation<TArgs, TResult>;
+}
+
+export const useMutation = <TArgs extends any[], TResult>(
+  opts: UseMutationOptions<TArgs, TResult>,
+): UseMutationReturn<TArgs, TResult> => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return {
+    mutate: async (...args) => {
+      setIsLoading(true);
+
+      try {
+        const result = await opts.mutation(...args);
+        return result;
+      } catch (e) {
+        throw e;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    isLoading,
+  };
+};
+
+const mutation = useMutation({
+  mutation: createUser,
+});
+
+mutation.mutate({ name: "John Doe", email: "[email protected]" });
+
+// @ts-expect-error email missing!
+mutation.mutate({ name: "John Doe" });
+
+mutation.mutate(
+  {
+    name: "John Doe",
+    email: "[email protected]",
+  },
+  {
+    throwOnError: true,
+    // @ts-expect-error extra prop
+    extra: "oh dear",
+  },
+);
+
+type test = [
+  Expect<Equal<typeof mutation.isLoading, boolean>>,
+  Expect<
+    Equal<
+      typeof mutation.mutate,
+      (
+        user: { name: string; email: string },
+        opts?: {
+          throwOnError?: boolean;
+        },
+      ) => Promise<{
+        id: string;
+        name: string;
+        email: string;
+      }>
+    >
+  >,
+];

src/05-generics/37.2-inference-flow-with-constraints.problem.ts

@@ -1,3 +1,25 @@
+/**
+ * A fake function to create a user
+ */
+export const createUser = (
+  user: {
+    name: string;
+    email: string;
+  },
+  opts?: {
+    throwOnError?: boolean;
+  },
+): Promise<{
+  id: string;
+  name: string;
+  email: string;
+}> => {
+  return fetch("/user", {
+    method: "POST",
+    body: JSON.stringify(user),
+  }).then((response) => response.json());
+};
+
 /**
  * A fake auth token hook.
  */