Added as prop stuff

Author: mattpocock

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-.vscode
+.vscode
+tsconfig.temp.json

package.json

@@ -144,7 +144,19 @@
     "e-65": "tt-cli run 65",
     "s-65": "tt-cli run 65 --solution",
     "e-66": "tt-cli run 66",
-    "s-66": "tt-cli run 66 --solution"
+    "s-66": "tt-cli run 66 --solution",
+    "e-43": "tt-cli run 43",
+    "s-43": "tt-cli run 43 --solution",
+    "e-67": "tt-cli run 67",
+    "s-67": "tt-cli run 67 --solution",
+    "e-68": "tt-cli run 68",
+    "s-68": "tt-cli run 68 --solution",
+    "e-70": "tt-cli run 70",
+    "s-70": "tt-cli run 70 --solution",
+    "e-71": "tt-cli run 71",
+    "s-71": "tt-cli run 71 --solution",
+    "e-73": "tt-cli run 73",
+    "s-73": "tt-cli run 73 --solution"
   },
   "dependencies": {
     "@tanstack/react-query": "^4.29.12",
@@ -158,4 +170,4 @@
     "react-select": "^5.7.3",
     "zod": "^3.21.4"
   }
-}
+}

src/08-advanced-patterns/62-required-context.problem.tsx renamed to src/06-advanced-hooks/51-required-context.problem.tsx

@@ -17,8 +17,8 @@ type Props<T> = {
 
 // declare module "react" {
 //   function forwardRef<T, P = {}>(
-//     render: (props: P, ref: React.Ref<T>) => React.ReactNode | null,
-//   ): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
+//     render: (props: P, ref: React.Ref<T>) => React.ReactNode,
+//   ): (props: P & React.RefAttributes<T>) => React.ReactNode;
 // }
 
 /**

src/08-advanced-patterns/62-required-context.solution.1.tsx renamed to src/06-advanced-hooks/51-required-context.solution.1.tsx

@@ -0,0 +1,36 @@
+import { ForwardedRef, forwardRef } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+/**
+ * Using the forward-ref-with-generics explanation as a guide,
+ * give fixedForwardRef a type signature that allows it to
+ * work with the example below.
+ */
+function fixedForwardRef(
+  render: (props: any, ref: any) => any,
+): (props: any) => any {
+  return forwardRef(render) as any;
+}
+
+type Props<T> = {
+  data: T[];
+  renderRow: (item: T) => React.ReactNode;
+};
+
+export const Table = <T,>(props: Props<T>, ref: ForwardedRef<any>) => {
+  return null;
+};
+
+const ForwardReffedTable = fixedForwardRef(Table);
+
+const Parent = () => {
+  return (
+    <ForwardReffedTable
+      data={["123"]}
+      renderRow={(row) => {
+        type test = Expect<Equal<typeof row, string>>;
+        return <div>123</div>;
+      }}
+    ></ForwardReffedTable>
+  );
+};

src/08-advanced-patterns/62-required-context.solution.2.tsx renamed to src/06-advanced-hooks/51-required-context.solution.2.tsx

@@ -0,0 +1,31 @@
+import { ForwardedRef, forwardRef } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+function fixedForwardRef<T, P = {}>(
+  render: (props: P, ref: React.Ref<T>) => React.ReactNode,
+): (props: P & React.RefAttributes<T>) => React.ReactNode {
+  return forwardRef(render) as any;
+}
+
+type Props<T> = {
+  data: T[];
+  renderRow: (item: T) => React.ReactNode;
+};
+
+export const Table = <T,>(props: Props<T>, ref: ForwardedRef<any>) => {
+  return null;
+};
+
+const ForwardReffedTable = fixedForwardRef(Table);
+
+const Parent = () => {
+  return (
+    <ForwardReffedTable
+      data={["123"]}
+      renderRow={(row) => {
+        type test = Expect<Equal<typeof row, string>>;
+        return <div>123</div>;
+      }}
+    ></ForwardReffedTable>
+  );
+};

src/07-types-deep-dive/51-understand-react-namespace-export.explainer.ts renamed to src/07-types-deep-dive/52-understand-react-namespace-export.explainer.ts

@@ -0,0 +1,23 @@
+import React, { ComponentPropsWithoutRef, ElementType } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+export const Wrapper = <T extends ElementType<any>>(
+  props: {
+    as: T;
+  } & ComponentPropsWithoutRef<T>,
+) => {
+  const Comp = props.as;
+  return <Comp {...(props as any)}></Comp>;
+};
+
+const Link = (props: { href: string; children?: React.ReactNode }) => {
+  return <a href={props.href}>{props.children}</a>;
+};
+
+<Wrapper as={Link} href="awdawd" />;
+<Wrapper
+  as="button"
+  onClick={(e) => {
+    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLButtonElement>>>;
+  }}
+/>;

src/07-types-deep-dive/52-understanding-jsx-element.explainer.tsx renamed to src/07-types-deep-dive/53-understanding-jsx-element.explainer.tsx

@@ -0,0 +1,36 @@
+import { ComponentPropsWithoutRef, ElementType } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+export const Link = <T extends ElementType<any>>(
+  props: {
+    as: T;
+  } & ComponentPropsWithoutRef<T>,
+) => {
+  const { as: Comp, ...rest } = props;
+  return <Comp {...rest}></Comp>;
+};
+
+// Should be a 'a' tag by default!
+<Link href="/"></Link>;
+
+const Custom = (props: { thisIsRequired: boolean }) => {
+  return null;
+};
+
+<Link as={Custom} thisIsRequired />;
+
+// @ts-expect-error Property 'thisIsRequired' is missing
+<Link as={Custom} />;
+
+<Link
+  as="button"
+  onClick={(e) => {
+    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLButtonElement>>>;
+  }}
+></Link>;
+
+<Link
+  as="div"
+  // @ts-expect-error: Property 'href' does not exist
+  href="awdawd"
+></Link>;

src/07-types-deep-dive/53-strongly-typing-children.explainer.tsx renamed to src/07-types-deep-dive/54-strongly-typing-children.explainer.tsx

@@ -0,0 +1,35 @@
+import { ComponentPropsWithoutRef, ElementType } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+export const Link = <T extends ElementType<any> = "a">(
+  props: {
+    as?: T;
+  } & ComponentPropsWithoutRef<T>,
+) => {
+  const { as: Comp = "a", ...rest } = props;
+  return <Comp {...rest}></Comp>;
+};
+
+<Link href="/"></Link>;
+
+const Custom = (props: { thisIsRequired: boolean }) => {
+  return null;
+};
+
+<Link as={Custom} thisIsRequired />;
+
+// @ts-expect-error Property 'thisIsRequired' is missing
+<Link as={Custom} />;
+
+<Link
+  as="button"
+  onClick={(e) => {
+    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLButtonElement>>>;
+  }}
+></Link>;
+
+<Link
+  as="div"
+  // @ts-expect-error: Property 'href' does not exist
+  href="awdawd"
+></Link>;