Added challenges and explainers

Author: mattpocock

src/01-generics-intro/06-excalidraw-sum-function.explainer.ts

@@ -0,0 +1,3 @@
+// Explain excalidraw's sum function
+
+export {};

src/02-passing-type-arguments/11.5-fetch-wrapper-in-cal.com.explainer.ts renamed to src/02-passing-type-arguments/11.1-passing-type-arguments-in-cal.com.explainer.ts

@@ -0,0 +1,15 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+export const inferItemLiteral = <T extends string | number>(t: T) => {
+  return {
+    output: t,
+  };
+};
+
+const result1 = inferItemLiteral("a");
+const result2 = inferItemLiteral(123);
+
+type tests = [
+  Expect<Equal<typeof result1, { output: "a" }>>,
+  Expect<Equal<typeof result2, { output: 123 }>>,
+];

src/03-art-of-type-arguments/14.7-string-number-union.problem.ts

@@ -0,0 +1,37 @@
+import { CSSProperties } from "react";
+
+/**
+ * In this implementation, we need to specify the theme
+ * inside useStyled wherever we use it. This is not ideal.
+ *
+ * See if you can refactor useStyled into a function called
+ * makeUseStyled which returns a useStyled function, typed
+ * with the theme.
+ *
+ * Desired API:
+ *
+ * const useStyled = makeUseStyled<MyTheme>();
+ */
+const useStyled = <TTheme = {}>(func: (theme: TTheme) => CSSProperties) => {
+  // Imagine that this function hooks into a global theme
+  // and returns the CSSProperties
+  return {} as CSSProperties;
+};
+
+interface MyTheme {
+  color: {
+    primary: string;
+  };
+  fontSize: {
+    small: string;
+  };
+}
+
+const buttonStyle = useStyled<MyTheme>((theme) => ({
+  color: theme.color.primary,
+  fontSize: theme.fontSize.small,
+}));
+
+const divStyle = useStyled<MyTheme>((theme) => ({
+  backgroundColor: theme.color.primary,
+}));

src/04-generics-advanced/20.6-reusable-context.problem.ts

@@ -0,0 +1,31 @@
+import { CSSProperties } from "react";
+
+const makeUseStyled = <TTheme = {}>() => {
+  const useStyled = (func: (theme: TTheme) => CSSProperties) => {
+    // Imagine that this function hooks into a global theme
+    // and returns the CSSProperties
+    return {} as CSSProperties;
+  };
+
+  return useStyled;
+};
+
+const useStyled = makeUseStyled<MyTheme>();
+
+interface MyTheme {
+  color: {
+    primary: string;
+  };
+  fontSize: {
+    small: string;
+  };
+}
+
+const buttonStyle = useStyled((theme) => ({
+  color: theme.color.primary,
+  fontSize: theme.fontSize.small,
+}));
+
+const divStyle = useStyled((theme) => ({
+  backgroundColor: theme.color.primary,
+}));

src/04-generics-advanced/20.6-reusable-context.solution.ts

@@ -0,0 +1,45 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+export const makeSelectors = <
+  TSource,
+  TSelectors extends Record<string, (source: TSource) => any> = {},
+>(
+  selectors: TSelectors,
+) => {
+  return selectors;
+};
+
+interface Source {
+  firstName: string;
+  middleName: string;
+  lastName: string;
+}
+
+/**
+ * We've got a problem here. We want to be able to infer the type
+ * of the selectors object from what we passed in to makeSelectors.
+ *
+ * But we can't. As soon as we pass ONE type argument, inference
+ * doesn't work on the other type arguments. We want to refactor this
+ * so that we can infer the type of the selectors object.
+ *
+ * Desired API:
+ *
+ * makeSelectors<Source>()({ ...selectorsGoHere })
+ */
+const selectors = makeSelectors<Source>({
+  getFullName: (source) =>
+    `${source.firstName} ${source.middleName} ${source.lastName}`,
+  getFirstAndLastName: (source) => `${source.firstName} ${source.lastName}`,
+  getFirstNameLength: (source) => source.firstName.length,
+});
+
+type tests = [
+  Expect<Equal<typeof selectors["getFullName"], (source: Source) => string>>,
+  Expect<
+    Equal<typeof selectors["getFirstAndLastName"], (source: Source) => string>
+  >,
+  Expect<
+    Equal<typeof selectors["getFirstNameLength"], (source: Source) => number>
+  >,
+];

src/04-generics-advanced/20.7-working-around-partial-inference.problem.ts

@@ -0,0 +1,32 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+export const makeSelectors =
+  <TSource = "Type argument expected in makeSelectors">() =>
+  <TSelectors extends Record<string, (source: TSource) => any>>(
+    selectors: TSelectors
+  ) => {
+    return selectors;
+  };
+
+interface Source {
+  firstName: string;
+  middleName: string;
+  lastName: string;
+}
+
+const selectors = makeSelectors<Source>()({
+  getFullName: (source) =>
+    `${source.firstName} ${source.middleName} ${source.lastName}`,
+  getFirstAndLastName: (source) => `${source.firstName} ${source.lastName}`,
+  getFirstNameLength: (source) => source.firstName.length,
+});
+
+type tests = [
+  Expect<Equal<typeof selectors["getFullName"], (source: Source) => string>>,
+  Expect<
+    Equal<typeof selectors["getFirstAndLastName"], (source: Source) => string>
+  >,
+  Expect<
+    Equal<typeof selectors["getFirstNameLength"], (source: Source) => number>
+  >
+];

src/04-generics-advanced/20.7-working-around-partial-inference.solution.ts

@@ -0,0 +1,35 @@
+import { expect, it } from "vitest";
+import { Equal, Expect } from "../helpers/type-utils";
+
+const pick = (obj: unknown, pick: unknown) => {};
+
+it("Should pick the keys from the object", () => {
+  const result = pick(
+    {
+      a: 1,
+      b: 2,
+      c: 3,
+    },
+    ["a", "b"]
+  );
+
+  expect(result).toEqual({ a: 1, b: 2 });
+
+  type test = Expect<Equal<typeof result, { a: number; b: number }>>;
+});
+
+it("Should not allow you to pass keys which do not exist in the object", () => {
+  pick(
+    {
+      a: 1,
+      b: 2,
+      c: 3,
+    },
+    [
+      "a",
+      "b",
+      // @ts-expect-error
+      "d",
+    ]
+  );
+});

src/06-challenges/31-pick.problem.ts

@@ -0,0 +1,40 @@
+import { expect, it } from "vitest";
+import { Equal, Expect } from "../helpers/type-utils";
+
+const pick = <TObj, TPicked extends keyof TObj>(obj: TObj, pick: TPicked[]) => {
+  return pick.reduce((acc, key) => {
+    acc[key] = obj[key];
+    return acc;
+  }, {} as Pick<TObj, TPicked>);
+};
+
+it("Should pick the keys from the object", () => {
+  const result = pick(
+    {
+      a: 1,
+      b: 2,
+      c: 3,
+    },
+    ["a", "b"]
+  );
+
+  expect(result).toEqual({ a: 1, b: 2 });
+
+  type test = Expect<Equal<typeof result, { a: number; b: number }>>;
+});
+
+it("Should not allow you to pass keys which do not exist in the object", () => {
+  pick(
+    {
+      a: 1,
+      b: 2,
+      c: 3,
+    },
+    [
+      "a",
+      "b",
+      // @ts-expect-error
+      "d",
+    ]
+  );
+});

src/06-challenges/31-pick.solution.ts

@@ -0,0 +1,24 @@
+import { expect, it } from "vitest";
+import { Equal, Expect } from "../helpers/type-utils";
+
+const fetchData = async <TResult>(url: string): Promise<TResult> => {
+  const data = await fetch(url).then((response) => response.json());
+  return data;
+};
+
+it("Should fetch data from an API", async () => {
+  const data = await fetchData<{ name: string }>(
+    "https://swapi.dev/api/people/1",
+  );
+  expect(data.name).toEqual("Luke Skywalker");
+
+  type tests = [Expect<Equal<typeof data, { name: string }>>];
+});
+
+it("Should force you to add a type annotation with a helpful error message", async () => {
+  const data = await fetchData("https://swapi.dev/api/people/1");
+
+  type tests = [
+    Expect<Equal<typeof data, "You must pass a type argument to fetchData">>,
+  ];
+});