Completed 07-types-deep-dive

Author: mattpocock

src/07-types-deep-dive/44-understand-react-namespace-export.explainer.ts

@@ -9,6 +9,10 @@ type Example = React.ReactNode;
 /**
  * 2a. Most namespaces can't be used as values. So how come
  * we can use React as a value here?
+ *
+ * HINT - we're adding LOTS of things to React's namespace in
+ * later exercises, so make sure when you go-to-definition you
+ * go to its original definition, in @types/react/index.d.ts.
  */
 const element = React.createElement("div");
 //              ^?

src/07-types-deep-dive/45-understanding-jsx-element.explainer.tsx

@@ -1,20 +1,31 @@
 /**
  * 1. What's the difference between JSX.Element,
  * React.ReactNode and React.ReactElement?
+ *
+ * CMD-click each of them to understand the difference.
  */
-const Component = () => {
-  //  ^?
-  return <div>Hello world</div>;
-};
 
 type ClickMe = React.ReactElement;
 type ClickMeToo = JSX.Element;
 type ClickMeThree = React.ReactNode;
 
 /**
- * 2. Why does this break?
+ * 2. What is the return type of this Component?
  */
+const Component = () => {
+  return <div>Hello world</div>;
+};
 
+/**
+ * 3. Fun fact - this might break on your IDE! In
+ * TypeScript 5.0, this wouldn't work. But in TypeScript
+ * 5.1, it DOES work.
+ *
+ * If it's not working for you, try making your IDE use
+ * the 'workspace' version of TypeScript.
+ *
+ * https://stackoverflow.com/questions/39668731/what-typescript-version-is-visual-studio-code-using-how-to-update-it
+ */
 const Component2 = (): React.ReactNode => {
   return <div></div>;
 };
@@ -24,13 +35,19 @@ const Component2 = (): React.ReactNode => {
 </>;
 
 /**
- * 3. Why does this work?
+ * 4a. Why does this component NOT error...
  */
-
 const Component3 = (): React.ReactElement => {
   return <div></div>;
 };
 
 <>
   <Component3 />
 </>;
+
+/**
+ * 4b. ...but this one does?
+ */
+const Component4 = (): React.ReactElement => {
+  return "hello!";
+};

src/07-types-deep-dive/46-strongly-typing-children.explainer.tsx

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+
+/**
+ * In this example we have a Select component. Through some magic, we're
+ * attempting to strongly type the children of the Select component so
+ * that you can only pass 'Option' elements to it.
+ *
+ * 1. Try to understand the type of OptionType. What's the __brand property
+ * for?
+ *
+ * 2. There's an error happening at <Option /> below. Why is that?
+ *
+ * 3. Try changing <Option /> to {Option()}. This appears to work. Why?
+ * And why is this NOT a good idea?
+ *
+ * 4. Is what we're attempting to do even possible?
+ */
+
+type OptionType = {
+  __brand: "OPTION_TYPE";
+} & ReactNode;
+
+const Option = () => {
+  return (<option></option>) as OptionType;
+};
+
+const Select = (props: { children: OptionType }) => {
+  return <select>{props.children}</select>;
+};
+
+<Select>
+  <Option />
+</Select>;

src/07-types-deep-dive/46-strongly-typing-children.problem.tsx

@@ -0,0 +1,30 @@
+/**
+ * 1. What is JSX.IntrinsicElements? CMD-click on .IntrinsicElements below
+ * to go to its definition.
+ *
+ * Hint - remember to go to the original definition of JSX.IntrinsicElements
+ * in @types/react/index.d.ts.
+ */
+
+export type Example = JSX.IntrinsicElements;
+
+/**
+ * 2. What is the structure of JSX.IntrinsicElements? It appears to have the
+ * HTML attributes as properties, but what are the values?
+ *
+ * 3. Let's have some fun. Edit the file to add a new property to
+ * JSX.IntrinsicElements:
+ *
+ * interface IntrinsicElements {
+ *   // ...
+ *   myNewElement: {
+ *     foo: string;
+ *   }
+ * }
+ *
+ * Notice that the error below goes away!
+ *
+ * 4. Now change it back, before anyone notices.
+ */
+
+<myNewElement foo="123" />;

src/07-types-deep-dive/47-how-does-react-represent-html.explainer.ts

@@ -0,0 +1,17 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+/**
+ * It's actually possible to change things in the global namespace
+ * in TypeScript.
+ *
+ * 1. Add a declaration for React.MyInterface to the global React
+ * namespace below.
+ */
+
+declare global {
+  namespace React {}
+}
+
+type test = Expect<Equal<React.MyInterface, { foo: string }>>;
+
+export {};

src/07-types-deep-dive/47-understanding-jsx-intrinsic-elements.explainer.ts

@@ -0,0 +1,14 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+declare global {
+  namespace React {
+    // Note that it doesn't need to be exported
+    interface MySolutionInterface {
+      foo: string;
+    }
+  }
+}
+
+type test = Expect<Equal<React.MySolutionInterface, { foo: string }>>;
+
+export {};

src/07-types-deep-dive/47-understanding-jsx-intrinsic-elements.explainer.tsx

@@ -0,0 +1,28 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+declare global {
+  namespace React {
+    interface MyAwesomeInterface {
+      foo: string;
+    }
+  }
+}
+
+/**
+ * We can use a feature called declaration merging in TypeScript to
+ * CHANGE interfaces in the global namespace.
+ *
+ * WITHOUT changing the code above, change MyAwesomeInterface to add
+ * a property called 'bar' that is a string.
+ *
+ * Clue: you'll need to use declare global, namespace, and interface
+ * again.
+ *
+ * https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces
+ */
+
+type test = Expect<
+  Equal<React.MyAwesomeInterface, { foo: string; bar: string }>
+>;
+
+export {};

src/07-types-deep-dive/48-add-new-global-element.problem.tsx

@@ -0,0 +1,29 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+declare global {
+  namespace React {
+    interface MyAwesomeSolutionInterface {
+      foo: string;
+    }
+  }
+}
+
+/**
+ * By declaring MyAwesomeSolutionInferface for the second time
+ * in the same scope, we can add properties to it.
+ *
+ * The power of declaration merging!
+ */
+declare global {
+  namespace React {
+    interface MyAwesomeSolutionInterface {
+      bar: string;
+    }
+  }
+}
+
+type test = Expect<
+  Equal<React.MyAwesomeSolutionInterface, { foo: string; bar: string }>
+>;
+
+export {};

src/07-types-deep-dive/48-appending-to-global-namespace.problem.ts

@@ -0,0 +1,21 @@
+/**
+ * Let's say we're working with an external library that adds a new
+ * global element to the DOM. We want to strongly type this element
+ * so that it can only be used with the correct attributes.
+ *
+ * In this case, we're adding a <something /> element to the DOM,
+ * which takes a required `id` attribute.
+ *
+ * Hint - you'll need to declaration merge with an existing
+ * interface in the React namespace.
+ */
+
+<>
+  <something id="123"></something>
+
+  {/* @ts-expect-error */}
+  <something></something>
+
+  {/* @ts-expect-error */}
+  <something id={123}></something>
+</>;

src/07-types-deep-dive/48-appending-to-global-namespace.solution.ts

@@ -9,11 +9,11 @@ declare global {
 }
 
 <>
-  <something-solution id="123"></something-solution>
+  <something-solution id="123" />
 
   {/* @ts-expect-error */}
-  <something-solution></something-solution>
+  <something-solution />
 
   {/* @ts-expect-error */}
-  <something-solution id={123}></something-solution>
+  <something-solution id={123} />
 </>;

src/07-types-deep-dive/49-add-attribute-to-all-elements.problem.tsx

@@ -0,0 +1,24 @@
+/**
+ * 1. How does React know which HTML attributes can be passed
+ * to each HTML element?
+ *
+ * On which interfaces/types are they stored?
+ */
+
+/**
+ * 2. Try CMD-clicking on the 'div' below. What information
+ * does that give you?
+ */
+<div />;
+
+/**
+ * 3. Try CMD-clicking on the className prop below. What
+ * interface does it lead you to?
+ */
+<div className="foo" />;
+
+/**
+ * 4. Finally, try CMD-clicking on the 'href' prop below.
+ * What interface does it lead you to?
+ */
+<a href="/" />;

src/07-types-deep-dive/49-declaration-merging-in-global-namespace.problem.ts

@@ -0,0 +1,16 @@
+/**
+ * Let's say we wanted to add a new optional attribute to all React
+ * elements. How would we do that?
+ *
+ * 1. Make use of declaration merging in the global scope to add
+ * a new attribute to all React elements.
+ */
+
+<>
+  <div testId="123" />
+  <audio testId="123" />
+  <video testId="123" />
+  <a testId="123" />
+  <abbr testId="123" />
+  <address testId="123" />
+</>;

src/07-types-deep-dive/49-declaration-merging-in-global-namespace.solution.ts

@@ -0,0 +1,16 @@
+declare global {
+  namespace React {
+    interface HTMLAttributes<T> {
+      solutionTestId?: string;
+    }
+  }
+}
+
+<>
+  <div solutionTestId="123" />
+  <audio solutionTestId="123" />
+  <video solutionTestId="123" />
+  <a solutionTestId="123" />
+  <abbr solutionTestId="123" />
+  <address solutionTestId="123" />
+</>;