Added 27, modified 26

Author: mattpocock

src/04-advanced-components/26-partial-autocomplete.problem.tsx

@@ -1 +1,28 @@
-// TODO
+const presetSizes = {
+  xs: "0.5rem",
+  sm: "1rem",
+};
+
+type Size = keyof typeof presetSizes;
+
+type LooseSize = Size | string;
+
+export const Icon = (props: { size: LooseSize }) => {
+  return (
+    <div
+      style={{
+        width:
+          props.size in presetSizes
+            ? presetSizes[props.size as Size]
+            : props.size,
+      }}
+    />
+  );
+};
+
+<>
+  {/* Autocomplete for sm and xs are no longer working! */}
+  <Icon size="sm"></Icon>
+  <Icon size="xs"></Icon>
+  <Icon size="10px"></Icon>
+</>;

src/04-advanced-components/26-partial-autocomplete.solution.1.tsx

@@ -0,0 +1,27 @@
+const presetSizes = {
+  xs: "0.5rem",
+  sm: "1rem",
+};
+
+type Size = keyof typeof presetSizes;
+
+type LooseSize = Size | (string & {});
+
+export const Icon = (props: { size: LooseSize }) => {
+  return (
+    <div
+      style={{
+        width:
+          props.size in presetSizes
+            ? presetSizes[props.size as Size]
+            : props.size,
+      }}
+    />
+  );
+};
+
+<>
+  <Icon size="sm"></Icon>
+  <Icon size="xs"></Icon>
+  <Icon size="10px"></Icon>
+</>;

src/04-advanced-components/26-partial-autocomplete.solution.2.tsx

@@ -0,0 +1,29 @@
+const presetSizes = {
+  xs: "0.5rem",
+  sm: "1rem",
+};
+
+type Size = keyof typeof presetSizes;
+
+type LooseAutocomplete<T> = T | (string & {});
+
+type LooseSize = LooseAutocomplete<Size>;
+
+export const Icon = (props: { size: LooseSize }) => {
+  return (
+    <div
+      style={{
+        width:
+          props.size in presetSizes
+            ? presetSizes[props.size as Size]
+            : props.size,
+      }}
+    />
+  );
+};
+
+<>
+  <Icon size="sm"></Icon>
+  <Icon size="xs"></Icon>
+  <Icon size="10px"></Icon>
+</>;

src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx

@@ -0,0 +1,45 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+type InputProps = React.ComponentProps<"input">;
+
+/**
+ * All these components take the same props!
+ *
+ * We don't want to repeat ourselves by typing
+ * props: InputProps for each component.
+ *
+ * There must be a better way!
+ *
+ * Hint: Record and satisfies will come in handy.
+ */
+const COMPONENTS = {
+  text: (props) => {
+    return <input {...props} type="text" />;
+  },
+  number: (props) => {
+    return <input {...props} type="number" />;
+  },
+  password: (props) => {
+    return <input {...props} type="password" />;
+  },
+};
+
+export const Input = (props: unknown) => {
+  const Component = COMPONENTS[props.type];
+  return <Component {...props} />;
+};
+
+<>
+  <Input
+    type="number"
+    onChange={(e) => {
+      // e should be properly typed!
+      type test = Expect<Equal<typeof e, React.ChangeEvent<HTMLInputElement>>>;
+    }}
+  ></Input>
+  <Input type="text"></Input>
+  <Input type="password"></Input>
+
+  {/* @ts-expect-error */}
+  <Input type="email"></Input>
+</>;

src/04-advanced-components/27-record-of-components-with-same-props.solution.1.tsx

@@ -0,0 +1,40 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+type InputProps = React.ComponentProps<"input">;
+
+type Input = "text" | "number" | "password";
+
+/**
+ * We can do it by typing Input and making COMPONENTS
+ * restricted to only those inputs.
+ */
+const COMPONENTS: Record<Input, React.FC<InputProps>> = {
+  text: (props) => {
+    return <input {...props} type="text" />;
+  },
+  number: (props) => {
+    return <input {...props} type="number" />;
+  },
+  password: (props) => {
+    return <input {...props} type="password" />;
+  },
+};
+
+export const Input = (props: { type: Input } & InputProps) => {
+  const Component = COMPONENTS[props.type];
+  return <Component {...props} />;
+};
+
+<>
+  <Input
+    type="number"
+    onChange={(e) => {
+      type test = Expect<Equal<typeof e, React.ChangeEvent<HTMLInputElement>>>;
+    }}
+  ></Input>
+  <Input type="text"></Input>
+  <Input type="password"></Input>
+
+  {/* @ts-expect-error */}
+  <Input type="email"></Input>
+</>;

src/04-advanced-components/27-record-of-components-with-same-props.solution.2.tsx

@@ -0,0 +1,44 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+type InputProps = React.ComponentProps<"input">;
+
+/**
+ * OR, we can do it by making COMPONENTS 'satisfy'
+ * a type that is a Record of React.FC<InputProps>.
+ */
+const COMPONENTS = {
+  text: (props) => {
+    return <input {...props} type="text" />;
+  },
+  number: (props) => {
+    return <input {...props} type="number" />;
+  },
+  password: (props) => {
+    return <input {...props} type="password" />;
+  },
+} satisfies Record<string, React.FC<InputProps>>;
+
+/**
+ * Then, we can derive the type of input from the
+ * keys of COMPONENTS.
+ */
+type Input = keyof typeof COMPONENTS;
+
+export const Input = (props: { type: Input } & InputProps) => {
+  const Component = COMPONENTS[props.type];
+  return <Component {...props} />;
+};
+
+<>
+  <Input
+    type="number"
+    onChange={(e) => {
+      type test = Expect<Equal<typeof e, React.ChangeEvent<HTMLInputElement>>>;
+    }}
+  ></Input>
+  <Input type="text"></Input>
+  <Input type="password"></Input>
+
+  {/* @ts-expect-error */}
+  <Input type="email"></Input>
+</>;