Initial, WIP attempt

Author: mattpocock

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.vscode

README.md

@@ -0,0 +1,63 @@
+<a href="https://totaltypescript.com"><img src="./og-image.png" /></a>
+
+## Work in progress!
+
+This repository is a work-in-progress. Exercises may appear out of order, and there will likely be a lot of content inside the [`FUTURE`](./notes/FUTURE.md) notes.
+
+You'll still be able to run through the exercises, but expect some bumps along the way!
+
+## Quickstart
+
+Clone this repo or [open in Gitpod](https://gitpod.io/#https://github.com/total-typescript/typescript-generics-tutorial).
+
+```sh
+# Installs all dependencies
+yarn install
+
+# Starts the first exercise
+yarn exercise 01
+
+# Runs linting and tests on the solution
+yarn solution 01
+```
+
+## How to take the course
+
+You'll notice that the course is split into exercises. Each exercise is split into a `*.problem.ts` and a `*.solution.ts`.
+
+To take an exercise:
+
+1. Go into `*.problem.ts`
+2. Run `yarn exercise 01`, where `01` is the number of the exercise you're on.
+
+The `exercise` script will run TypeScript typechecks and a test suite on the exercise.
+
+This course encourages **active, exploratory learning**. In the video, I'll explain a problem, and **you'll be asked to try to find a solution**. To attempt a solution, you'll need to:
+
+1. Check out [TypeScript's docs](https://www.typescriptlang.org/docs/handbook/intro.html)
+2. Try to find something that looks relevant.
+3. Give it a go to see if it solves the problem.
+
+You'll know if you've succeeded because the tests will pass.
+
+**If you succeed**, or **if you get stuck**, unpause the video and check out the `*.solution.ts`. You can see if your solution is better or worse than mine!
+
+You can run `yarn solution 01` to run the tests and typechecking on the solution.
+
+## Acknowledgements
+
+Say thanks to Matt on [Twitter](https://twitter.com/mattpocockuk) or by joining his [Discord](https://discord.gg/8S5ujhfTB3). Consider signing up to his [Total TypeScript course](https://totaltypescript.com).
+
+## Reference
+
+### `yarn exercise 01`
+
+Alias: `yarn e 01`
+
+Run the corresponding `*.problem.ts` file.
+
+### `yarn solution 01`
+
+Alias: `yarn s 01`
+
+Run the corresponding `*.solution.ts` file. If there are multiple, it runs only the first one.

notes/FUTURE.md

@@ -0,0 +1,43 @@
+# TypeScript Generics Tutorial
+
+## Things to add
+
+1. Default generics
+1. Generic constraints
+1. Using default generics to compute variables
+1. F.Narrow
+1. Multiple generics
+1. When to use any in highly dynamic generic signatures
+1. Spotting useless generics
+1. Generics in template literal types
+1. Inferring number/boolean from template literal types
+1. Infer
+1. Generics in type predicates and assertion functions
+1. Using function overloads to specify different generic signatures
+1. Generics in object primitive types
+1. Generics in classes
+1. this is this & {}
+1. Multiple generics per object
+
+## Things NOT to add
+
+These things are out-of-scope, or will be included in other modules
+
+- What are function overloads?
+- Converting union types to object types to make them faster (via key mapping and Extract)
+
+<!-- - limits of typeof narrowing (unknown and object)
+- Type predicates
+- Using external libraries and @types
+- discriminated unions
+  - narrowing on discriminated unions
+- Template literals
+- Branded types
+- Readonly properties on objects
+- Index signatures
+- `keyof`
+- Readonly, Exclude, Extract (union-based or readonly-based utility types)
+- let vs const vs as const
+- Function overloads
+- typeof
+- Generics in functions -->

og-image.png

@@ -0,0 +1,26 @@
+{
+  "name": "beginners-typescript",
+  "version": "1.0.0",
+  "main": "index.js",
+  "author": "Matt Pocock <[email protected]>",
+  "license": "GPL",
+  "devDependencies": {
+    "@types/node": "^18.6.5",
+    "chokidar": "^3.5.3",
+    "cross-fetch": "^3.1.5",
+    "typescript": "^4.8.2",
+    "vitest": "^0.21.1"
+  },
+  "scripts": {
+    "exercise": "node scripts/exercise.js",
+    "e": "yarn exercise",
+    "solution": "SOLUTION=true node scripts/exercise.js",
+    "s": "yarn solution"
+  },
+  "dependencies": {
+    "@types/express": "^4.17.13",
+    "express": "^4.18.1",
+    "ts-toolbelt": "^9.6.0",
+    "zod": "^3.17.10"
+  }
+}

package.json

@@ -0,0 +1,57 @@
+const { execSync } = require("child_process");
+const fs = require("fs");
+const path = require("path");
+const chokidar = require("chokidar");
+
+const srcPath = path.resolve(__dirname, "../src");
+const tsconfigPath = path.resolve(__dirname, "../tsconfig.json");
+
+const [, , exercise] = process.argv;
+
+if (!exercise) {
+  console.log("Please specify an exercise");
+  process.exit(1);
+}
+
+const allExercises = fs.readdirSync(srcPath);
+
+let pathIndicator = ".problem.";
+
+if (process.env.SOLUTION) {
+  pathIndicator = ".solution.";
+}
+
+const exercisePath = allExercises.find(
+  (exercisePath) =>
+    exercisePath.startsWith(exercise) && exercisePath.includes(pathIndicator),
+);
+
+if (!exercisePath) {
+  console.log(`Exercise ${exercise} not found`);
+  process.exit(1);
+}
+
+const exerciseFile = path.resolve(srcPath, exercisePath);
+
+// One-liner for current directory
+chokidar.watch(exerciseFile).on("all", (event, path) => {
+  const fileContents = fs.readFileSync(exerciseFile, "utf8");
+
+  const containsVitest = fileContents.includes("vitest");
+  try {
+    console.clear();
+    if (containsVitest) {
+      console.log("Running tests...");
+      execSync(`vitest run "${exerciseFile}" --passWithNoTests`, {
+        stdio: "inherit",
+      });
+    }
+    console.log("Checking types...");
+    execSync(`tsc "${exerciseFile}" --noEmit --strict`, {
+      stdio: "inherit",
+    });
+    console.log("Typecheck complete. You finished the exercise!");
+  } catch (e) {
+    console.log("Failed. Try again!");
+  }
+});

scripts/exercise.js

@@ -0,0 +1,3 @@
+import { fetch } from "cross-fetch";
+
+global.fetch = fetch;

scripts/setup.ts

@@ -0,0 +1,61 @@
+/**
+ * How can we refactor these to reduce the duplication
+ * in the 'data' declaration?
+ */
+
+import { Equal, Expect } from "./helpers/type-utils";
+
+export interface UserData {
+  data: {
+    id: string;
+    firstName: string;
+    lastName: string;
+  };
+}
+
+export interface PostData {
+  data: {
+    title: string;
+  };
+}
+
+export interface CommentData {
+  data: {
+    comment: string;
+  };
+}
+
+type tests = [
+  Expect<
+    Equal<
+      UserData,
+      {
+        data: {
+          id: string;
+          firstName: string;
+          lastName: string;
+        };
+      }
+    >
+  >,
+  Expect<
+    Equal<
+      PostData,
+      {
+        data: {
+          title: string;
+        };
+      }
+    >
+  >,
+  Expect<
+    Equal<
+      CommentData,
+      {
+        data: {
+          comment: string;
+        };
+      }
+    >
+  >,
+];

src/10-dry-interfaces.problem.ts

@@ -0,0 +1,59 @@
+/**
+ * How can we refactor these to reduce the duplication
+ * in the 'data' declaration?
+ */
+
+import { Equal, Expect } from "./helpers/type-utils";
+
+export interface DataContainer<TData> {
+  data: TData;
+}
+
+export type UserData = DataContainer<{
+  id: string;
+  firstName: string;
+  lastName: string;
+}>;
+
+export type PostData = DataContainer<{
+  title: string;
+}>;
+
+export type CommentData = DataContainer<{
+  comment: string;
+}>;
+
+type tests = [
+  Expect<
+    Equal<
+      UserData,
+      {
+        data: {
+          id: string;
+          firstName: string;
+          lastName: string;
+        };
+      }
+    >
+  >,
+  Expect<
+    Equal<
+      PostData,
+      {
+        data: {
+          title: string;
+        };
+      }
+    >
+  >,
+  Expect<
+    Equal<
+      CommentData,
+      {
+        data: {
+          comment: string;
+        };
+      }
+    >
+  >,
+];

src/10-dry-interfaces.solution.1.ts

@@ -0,0 +1,59 @@
+/**
+ * How can we refactor these to reduce the duplication
+ * in the 'data' declaration?
+ */
+
+import { Equal, Expect } from "./helpers/type-utils";
+
+export type DataContainer<TData> = {
+  data: TData;
+};
+
+export type UserData = DataContainer<{
+  id: string;
+  firstName: string;
+  lastName: string;
+}>;
+
+export type PostData = DataContainer<{
+  title: string;
+}>;
+
+export type CommentData = DataContainer<{
+  comment: string;
+}>;
+
+type tests = [
+  Expect<
+    Equal<
+      UserData,
+      {
+        data: {
+          id: string;
+          firstName: string;
+          lastName: string;
+        };
+      }
+    >
+  >,
+  Expect<
+    Equal<
+      PostData,
+      {
+        data: {
+          title: string;
+        };
+      }
+    >
+  >,
+  Expect<
+    Equal<
+      CommentData,
+      {
+        data: {
+          comment: string;
+        };
+      }
+    >
+  >,
+];

src/10-dry-interfaces.solution.2.ts

@@ -0,0 +1,10 @@
+import { Equal, Expect } from "./helpers/type-utils";
+
+const returnWhatIPassIn = (t: unknown) => {
+  return t;
+};
+
+const one = returnWhatIPassIn(1);
+const matt = returnWhatIPassIn("matt");
+
+type tests = [Expect<Equal<typeof one, 1>>, Expect<Equal<typeof matt, "matt">>];