Fixed toggle props and added more to types deep dive

Author: mattpocock

src/04-advanced-components/29-toggle-props.problem.tsx

@@ -1,12 +1,8 @@
-type EmbeddedPlaygroundProps =
-  | {
-      useStackblitz: true;
-      stackblitzId: string;
-    }
-  | {
-      useStackblitz?: false;
-      codeSandboxId: string;
-    };
+type EmbeddedPlaygroundProps = {
+  useStackblitz?: boolean;
+  stackblitzId?: string;
+  codeSandboxId?: string;
+};
 
 const EmbeddedPlayground = (props: EmbeddedPlaygroundProps) => {
   if (props.useStackblitz) {

src/06-types-deep-dive/43-understand-react-namespace-export.explainer.ts

@@ -1,11 +1,14 @@
-import React from "react";
-
 /**
- * Try deleting each of these lines in the
- * types themselves:
+ * Questions to answer:
  */
 
-// export = React;
-// export as namespace React;
+// 1. What is the React namespace?
+type Example = React.ReactNode;
+//             ^?
 
-// What is ExoticComponent?
+/**
+ * 2a. Most namespaces can't be used as values. So how come
+ * we can use React as a value here?
+ */
+const element = React.createElement("div");
+//              ^?

src/06-types-deep-dive/44-understanding-jsx-element.explainer.tsx

@@ -1 +1,36 @@
-// Talk about JSX.Element return type
+/**
+ * 1. What's the difference between JSX.Element,
+ * React.ReactNode and React.ReactElement?
+ */
+const Component = () => {
+  //  ^?
+  return <div>Hello world</div>;
+};
+
+type ClickMe = React.ReactElement;
+type ClickMeToo = JSX.Element;
+type ClickMeThree = React.ReactNode;
+
+/**
+ * 2. Why does this break?
+ */
+
+const Component2 = (): React.ReactNode => {
+  return <div></div>;
+};
+
+<>
+  <Component2 />
+</>;
+
+/**
+ * 3. Why does this work?
+ */
+
+const Component3 = (): React.ReactElement => {
+  return <div></div>;
+};
+
+<>
+  <Component3 />
+</>;

src/06-types-deep-dive/46-understanding-jsx-intrinsic-elements.explainer.ts

@@ -1 +1,5 @@
-export type JSXElementTypes = keyof JSX.IntrinsicElements;
+/**
+ * 1. What is JSX.IntrinsicElements?
+ */
+
+export type Example = React.JSX.IntrinsicElements;

src/06-types-deep-dive/47-add-new-global-element.problem.tsx

@@ -0,0 +1,9 @@
+<>
+  <something id="123"></something>
+
+  {/* @ts-expect-error */}
+  <something></something>
+
+  {/* @ts-expect-error */}
+  <something id={123}></something>
+</>;

src/06-types-deep-dive/47-add-new-global-element.solution.tsx

@@ -0,0 +1,19 @@
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "something-solution": {
+        id: string;
+      };
+    }
+  }
+}
+
+<>
+  <something-solution id="123"></something-solution>
+
+  {/* @ts-expect-error */}
+  <something-solution></something-solution>
+
+  {/* @ts-expect-error */}
+  <something-solution id={123}></something-solution>
+</>;

tsconfig.json

@@ -12,6 +12,6 @@
     "skipLibCheck": true
   },
   "include": [
-    "src"
+    "src",
   ]
 }