WIP

Author: mattpocock

notes/FUTURE.md

@@ -1,5 +1,4 @@
 ## Things to add
 
-Generic components
-Higher order components
-Typing forwardRef
+Function overloads in custom hooks?
+function overloads in components?

src/03-custom-hooks/19-typing-custom-hooks.solution.3.ts

@@ -0,0 +1,10 @@
+import { useState } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+export const useId = (defaultId: string): string => {
+  const [id] = useState<string>(defaultId);
+
+  return id;
+};
+
+type tests = [Expect<Equal<typeof useId, (defaultId: string) => string>>];

src/03-custom-hooks/21-generic-hooks.problem.ts

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+export const useStateAsObject = (initial: any) => {
+  const [value, set] = useState(initial);
+
+  return {
+    value,
+    set,
+  };
+};
+
+const example = useStateAsObject({ name: "Matt" });
+
+type ExampleTests = [
+  Expect<Equal<typeof example.value, { name: string }>>,
+  Expect<
+    Equal<
+      typeof example.set,
+      React.Dispatch<React.SetStateAction<{ name: string }>>
+    >
+  >,
+];
+
+const num = useStateAsObject(2);
+
+type NumTests = [
+  Expect<Equal<typeof num.value, number>>,
+  Expect<Equal<typeof num.set, React.Dispatch<React.SetStateAction<number>>>>,
+];

src/03-custom-hooks/21-generic-hooks.solution.1.ts

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+export const useStateAsObject = <T>(initial: T) => {
+  const [value, set] = useState(initial);
+
+  return {
+    value,
+    set,
+  };
+};
+
+const example = useStateAsObject({ name: "Matt" });
+
+type ExampleTests = [
+  Expect<Equal<typeof example.value, { name: string }>>,
+  Expect<
+    Equal<
+      typeof example.set,
+      React.Dispatch<React.SetStateAction<{ name: string }>>
+    >
+  >,
+];
+
+const num = useStateAsObject(2);
+
+type NumTests = [
+  Expect<Equal<typeof num.value, number>>,
+  Expect<Equal<typeof num.set, React.Dispatch<React.SetStateAction<number>>>>,
+];

src/03-custom-hooks/21-generic-hooks.solution.2.ts

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+export const useStateAsObject = <T>(
+  initial: T,
+): {
+  value: T;
+  set: React.Dispatch<React.SetStateAction<T>>;
+} => {
+  const [value, set] = useState(initial);
+
+  return {
+    value,
+    set,
+  };
+};
+
+const example = useStateAsObject({ name: "Matt" });
+
+type ExampleTests = [
+  Expect<Equal<typeof example.value, { name: string }>>,
+  Expect<
+    Equal<
+      typeof example.set,
+      React.Dispatch<React.SetStateAction<{ name: string }>>
+    >
+  >,
+];
+
+const num = useStateAsObject(2);
+
+type NumTests = [
+  Expect<Equal<typeof num.value, number>>,
+  Expect<Equal<typeof num.set, React.Dispatch<React.SetStateAction<number>>>>,
+];

src/03-custom-hooks/21-generic-hooks.solution.3.ts

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+type UseStateAsObjectReturn<T> = {
+  value: T;
+  set: React.Dispatch<React.SetStateAction<T>>;
+};
+
+export const useStateAsObject = <T>(initial: T): UseStateAsObjectReturn<T> => {
+  const [value, set] = useState(initial);
+
+  return {
+    value,
+    set,
+  };
+};
+
+const example = useStateAsObject({ name: "Matt" });
+
+type ExampleTests = [
+  Expect<Equal<typeof example.value, { name: string }>>,
+  Expect<
+    Equal<
+      typeof example.set,
+      React.Dispatch<React.SetStateAction<{ name: string }>>
+    >
+  >,
+];
+
+const num = useStateAsObject(2);
+
+type NumTests = [
+  Expect<Equal<typeof num.value, number>>,
+  Expect<Equal<typeof num.set, React.Dispatch<React.SetStateAction<number>>>>,
+];

src/03-custom-hooks/21-generic-hooks.solution.4.ts

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface UseStateAsObjectReturn<T> {
+  value: T;
+  set: React.Dispatch<React.SetStateAction<T>>;
+}
+
+export const useStateAsObject = <T>(initial: T): UseStateAsObjectReturn<T> => {
+  const [value, set] = useState(initial);
+
+  return {
+    value,
+    set,
+  };
+};
+
+const example = useStateAsObject({ name: "Matt" });
+
+type ExampleTests = [
+  Expect<Equal<typeof example.value, { name: string }>>,
+  Expect<
+    Equal<
+      typeof example.set,
+      React.Dispatch<React.SetStateAction<{ name: string }>>
+    >
+  >,
+];
+
+const num = useStateAsObject(2);
+
+type NumTests = [
+  Expect<Equal<typeof num.value, number>>,
+  Expect<Equal<typeof num.set, React.Dispatch<React.SetStateAction<number>>>>,
+];

src/03-custom-hooks/21-generic-hooks.solution.5.ts

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+export const useStateAsObject = <T>(initial: T) => {
+  const [value, set] = useState<T>(initial);
+
+  return {
+    value,
+    set,
+  };
+};
+
+const example = useStateAsObject({ name: "Matt" });
+
+type ExampleTests = [
+  Expect<Equal<typeof example.value, { name: string }>>,
+  Expect<
+    Equal<
+      typeof example.set,
+      React.Dispatch<React.SetStateAction<{ name: string }>>
+    >
+  >,
+];
+
+const num = useStateAsObject(2);
+
+type NumTests = [
+  Expect<Equal<typeof num.value, number>>,
+  Expect<Equal<typeof num.set, React.Dispatch<React.SetStateAction<number>>>>,
+];

src/03-custom-hooks/22-generic-localstorage-hook.problem.ts

@@ -0,0 +1,31 @@
+import { it } from "vitest";
+import { Equal, Expect } from "../helpers/type-utils";
+
+export const useLocalStorage = (prefix: string) => {
+  return {
+    get: (key: string) => {
+      return JSON.parse(window.localStorage.getItem(prefix + key) || "null");
+    },
+    set: (key: string, value: any) => {
+      window.localStorage.setItem(prefix + key, JSON.stringify(value));
+    },
+  };
+};
+
+const user = useLocalStorage<{ name: string }>("user");
+
+it("Should let you set and get values", () => {
+  user.set("matt", { name: "Matt" });
+
+  const mattUser = user.get("matt");
+
+  type tests = [Expect<Equal<typeof mattUser, { name: string } | null>>];
+});
+
+it("Should not let you set a value that is not the same type as the type argument passed", () => {
+  user.set(
+    "something",
+    // @ts-expect-error
+    {},
+  );
+});