More tweaks and changes

Author: mattpocock

src/07-advanced-patterns/50-required-context.problem.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-const createGenericContext = () => {
+const createRequiredContext = () => {
   const context = React.createContext(null);
 
   const useContext = () => {
@@ -17,11 +17,11 @@ const createGenericContext = () => {
   return [useContext, context.Provider] as const;
 };
 
-const [useUser, UserProvider] = createGenericContext<{
+const [useUser, UserProvider] = createRequiredContext<{
   name: string;
 }>();
 
-const [useTheme, ThemeProvider] = createGenericContext<{
+const [useTheme, ThemeProvider] = createRequiredContext<{
   primaryColor: string;
 }>();
 

src/07-advanced-patterns/50-required-context.solution.1.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-const createGenericContext = <T,>() => {
+const createRequiredContext = <T,>() => {
   const context = React.createContext<T | null>(null);
 
   const useContext = () => {
@@ -17,11 +17,11 @@ const createGenericContext = <T,>() => {
   return [useContext, context.Provider] as const;
 };
 
-const [useUser, UserProvider] = createGenericContext<{
+const [useUser, UserProvider] = createRequiredContext<{
   name: string;
 }>();
 
-const [useTheme, ThemeProvider] = createGenericContext<{
+const [useTheme, ThemeProvider] = createRequiredContext<{
   primaryColor: string;
 }>();
 

src/07-advanced-patterns/50-required-context.solution.2.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-const createGenericContext = <T,>(): [() => T, React.Provider<T | null>] => {
+const createRequiredContext = <T,>(): [() => T, React.Provider<T | null>] => {
   const context = React.createContext<T | null>(null);
 
   const useContext = (): T => {
@@ -17,11 +17,11 @@ const createGenericContext = <T,>(): [() => T, React.Provider<T | null>] => {
   return [useContext, context.Provider];
 };
 
-const [useUser, UserProvider] = createGenericContext<{
+const [useUser, UserProvider] = createRequiredContext<{
   name: string;
 }>();
 
-const [useTheme, ThemeProvider] = createGenericContext<{
+const [useTheme, ThemeProvider] = createRequiredContext<{
   primaryColor: string;
 }>();
 

src/07-advanced-patterns/52-forward-ref.problem.tsx renamed to src/07-advanced-patterns/52-forward-ref-with-generics.explainer.1.tsx

@@ -1,4 +1,5 @@
 import { ForwardedRef, forwardRef } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
 
 type Props<T> = {
   data: T[];
@@ -11,19 +12,20 @@ type Props<T> = {
 //   ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
 // }
 
-export const Table = forwardRef(
-  <T,>(props: Props<T>, ref: ForwardedRef<any>) => {
-    return null;
-  },
-);
+export const Table = <T,>(props: Props<T>, ref: ForwardedRef<any>) => {
+  return null;
+};
+
+const ForwardReffedTable = forwardRef(Table);
 
 const Parent = () => {
   return (
-    <Table
+    <ForwardReffedTable
       data={["123"]}
       renderRow={(row) => {
+        type test = Expect<Equal<typeof row, string>>;
         return <div>123</div>;
       }}
-    ></Table>
+    ></ForwardReffedTable>
   );
 };

src/07-advanced-patterns/52-forward-ref-with-generics.explainer.2.tsx

@@ -0,0 +1,31 @@
+import { ForwardedRef, forwardRef } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+type Props<T> = {
+  data: T[];
+  renderRow: (item: T) => React.ReactNode;
+};
+
+/**
+ * It even works across module boundaries!
+ *
+ * Try uncommenting the declare module section in
+ * explainer.1.tsx, and watch the error below go away.
+ */
+export const Table = <T,>(props: Props<T>, ref: ForwardedRef<any>) => {
+  return null;
+};
+
+const ForwardReffedTable = forwardRef(Table);
+
+const Parent = () => {
+  return (
+    <ForwardReffedTable
+      data={["123"]}
+      renderRow={(row) => {
+        type test = Expect<Equal<typeof row, string>>;
+        return <div>123</div>;
+      }}
+    ></ForwardReffedTable>
+  );
+};

src/07-advanced-patterns/54-as-prop.problem.tsx

@@ -1,12 +1,16 @@
-type AsProps = {
-  [K in keyof JSX.IntrinsicElements]: {
-    as: K;
-  } & JSX.IntrinsicElements[K];
-}[keyof JSX.IntrinsicElements];
-
-export const Component = (props: AsProps) => {
+export const Component = (props: any) => {
   const Comp = props.as;
   return <Comp {...(props as any)}></Comp>;
 };
 
-const yeah = <Component as="a" href="awdawd"></Component>;
+// Should work, and you should get autocomplete on the
+// props for the 'a' tag
+const example1 = <Component as="a" href="awdawd"></Component>;
+
+const example2 = (
+  <Component
+    as="div"
+    // @ts-expect-error: Property 'href' does not exist
+    href="awdawd"
+  ></Component>
+);

src/07-advanced-patterns/54-as-prop.solution.1.tsx

@@ -14,7 +14,7 @@ const example1 = <Component as="a" href="awdawd"></Component>;
 const example2 = (
   <Component
     as="div"
-    // Property 'href' does not exist
+    // @ts-expect-error: Property 'href' does not exist
     href="awdawd"
   ></Component>
 );

src/07-advanced-patterns/54-as-prop.solution.2.tsx

@@ -4,7 +4,18 @@ export const Component = <TAs extends keyof JSX.IntrinsicElements>(
   } & JSX.IntrinsicElements[TAs],
 ) => {
   const Comp = props.as as string;
-  return <Comp {...(props as any)}></Comp>;
+
+  // In this version, we can remove the 'as any' because
+  // TypeScript is able to keep up with the inference
+  return <Comp {...props}></Comp>;
 };
 
-const yeah = <Component as="input" value="awd"></Component>;
+const example1 = <Component as="a" href="awdawd"></Component>;
+
+const example2 = (
+  <Component
+    as="div"
+    // @ts-expect-error: Property 'href' does not exist
+    href="awdawd"
+  ></Component>
+);

src/07-advanced-patterns/55-as-prop-with-custom-components.problem.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 
-export const Component = (props: { as: any }) => {
+export const Component = (props: { as: unknown }) => {
   const Comp = props.as;
-  return <Comp {...(props as any)}></Comp>;
+  return <Comp {...props}></Comp>;
 };
 
 const Link = (props: { href: string; children?: React.ReactNode }) => {
   return <a href={props.href}>{props.children}</a>;
 };
 
-const yeah = <Component as={Link} href="awdawd"></Component>;
+<Component as={Link} href="awdawd"></Component>;

src/07-advanced-patterns/55-as-prop-with-custom-components.solution.tsx

@@ -8,7 +8,13 @@ export const Component = <
   } & ComponentProps<T>,
 ) => {
   const Comp = props.as;
-  return <Comp {...(props as any)}></Comp>;
+  return (
+    <Comp
+      // The 'as any' is still needed, because 'as' is SO generic
+      // that TypeScript can't handle it.
+      {...props}
+    ></Comp>
+  );
 };
 
 const Link = (props: { href: string; children?: React.ReactNode }) => {