✨ feat: add Type Operations > Array Type Shenanigans project (#87)

Author: JoshuaKGoldberg

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 *.js
+*.tsbuildinfo
 !*.config.js

projects/type-operations/array-type-shenanigans/01-flat-filter/README.md

@@ -0,0 +1,42 @@
+# Step 1: Flat Filter
+
+_Learning TypeScript_ introduced a generic `ArrayItemsRecursive` type that retrieves the nested elements from any input array type.
+It works by using an inferred conditional type to check if the input is an array, and recursing if so:
+
+```ts
+type ArrayItemsRecursive<T> = T extends (infer Item)[]
+	? ArrayItemsRecursive<Item>
+	: T;
+
+// Type: string
+type String2DItem = ArrayItemsRecursive<string[][]>;
+```
+
+Another trick you can do with generic type parameters is using `extends` to check if the parameter matches some other type.
+For example, this `IdentityFilter` type returns an original type `T` only if it `extends Filter`:
+
+```ts
+type IdentityFilter<T, Filter> = T extends Filter ? T : never;
+```
+
+For this step, use that `extends` filter concept with an array flattener type to both flatten an array type and filter the flattened items.
+
+## Specification
+
+Write a `FilteredArrayItems` type that takes in two type parameters:
+
+1. `T`
+2. `Filter`
+
+It should result in a flattened array or tuple type of items that only `extend Filter`.
+
+## Examples
+
+- `FilteredArrayItems<number[], string>` -> `number`
+- `FilteredArrayItems<(number | string)[], number>` -> `number`
+- `FilteredArrayItems<["a", 1, "b", 2], string>` -> `"a" | "b"`
+
+## Files
+
+- `index.ts`: Write your `FilteredArrayItems` type here
+- `solution.ts`: Solution code

projects/type-operations/array-type-shenanigans/01-flat-filter/index.d.ts

@@ -0,0 +1 @@
+export {};

projects/type-operations/array-type-shenanigans/01-flat-filter/index.test.d.ts

@@ -0,0 +1,27 @@
+import { FilteredArrayItems } from "~/index";
+
+function expectTypeExtends<T, U extends T>() {}
+
+expectTypeExtends<never, FilteredArrayItems<[], string>>();
+
+expectTypeExtends<never, FilteredArrayItems<number, string>>();
+
+expectTypeExtends<never, FilteredArrayItems<number[], string>>();
+
+expectTypeExtends<number, FilteredArrayItems<(number | string)[], number>>();
+
+expectTypeExtends<"a", FilteredArrayItems<["a"], string>>();
+
+expectTypeExtends<string, FilteredArrayItems<["a", string], string>>();
+
+expectTypeExtends<never, FilteredArrayItems<[1], string>>();
+
+expectTypeExtends<never, FilteredArrayItems<[1, number], string>>();
+
+expectTypeExtends<"a", FilteredArrayItems<[1, "a", 2, number], string>>();
+
+expectTypeExtends<number, FilteredArrayItems<[1, "a", 2, number], number>>();
+
+expectTypeExtends<"a", FilteredArrayItems<[1, "a", 2, 3], string>>();
+
+expectTypeExtends<1 | 2 | 3, FilteredArrayItems<[1, "a", 2, 3], number>>();

projects/type-operations/array-type-shenanigans/01-flat-filter/index.test.ts

@@ -0,0 +1,2 @@
+// Write your FilteredArrayItems type here! ✨
+// You'll need to export it so the tests can run it.

projects/type-operations/array-type-shenanigans/01-flat-filter/index.ts

@@ -0,0 +1,7 @@
+export declare type FilteredArrayItems<T, Filter> = T extends (infer Item)[]
+	? Item extends Filter
+		? FilteredArrayItems<Item, Filter>
+		: never
+	: T extends Filter
+	? T
+	: never;

projects/type-operations/array-type-shenanigans/01-flat-filter/solution.d.ts

@@ -0,0 +1,7 @@
+export type FilteredArrayItems<T, Filter> = T extends (infer Item)[]
+	? Item extends Filter
+		? FilteredArrayItems<Item, Filter>
+		: never
+	: T extends Filter
+	? T
+	: never;

projects/type-operations/array-type-shenanigans/01-flat-filter/solution.ts

@@ -0,0 +1,9 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"paths": {
+			"~/index": ["./index.ts"]
+		}
+	},
+	"include": ["./index.test.ts"]
+}

projects/type-operations/array-type-shenanigans/01-flat-filter/tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"paths": {
+			"~/index": ["./solution.ts"]
+		}
+	},
+	"include": ["./index.test.ts"]
+}

projects/type-operations/array-type-shenanigans/01-flat-filter/tsconfig.test.json

@@ -0,0 +1,62 @@
+# Step 2: Reverse
+
+Next up, let's have you start writing your own conditional types from scratch.
+You'll be working with `...` spread and rest operations, which conditional types are able to use on types known to be array types.
+You can enforce that a type parameter is an array type by giving it an array constraint like `extends any[]`.
+
+This `ArrayLength` type ensures `T` is some kind of array, so `T` is guaranteed to have a `length` property:
+
+```ts
+type ArrayLength<T extends any[]> = T["length"];
+
+// Type: number
+type LengthOfStringArray = ArrayLength<string[]>;
+
+// Type: 3
+type LengthOfTupleTrio = ArrayLength<["a", "b", "c"]>;
+```
+
+Spreads on array types allow types to _combine_ array types.
+For example, this `Unshift` type adds an item `Item` to the beginning of the `Rest` array:
+
+```ts
+type Unshift<Rest extends any[], Item> = [Item, ...Rest];
+
+// Type: ["First!", "a", "b", "c"]
+type PrefixFirst = Unshift<["a", "b", "c"], "First!">;
+```
+
+Rests on array types allow types to _extract_ from array types.
+For example, this `Pop` type ignores the first element in the array type retrieves the rest as `Rest`:
+
+```ts
+type Pop<T extends any[]> = T extends [any, ...infer Rest] ? Rest : never;
+
+// Type: ["b", "c"]
+type PopFirst = Pop<["a", "b", "c"]>;
+```
+
+Your task for this step is to use both concepts to create a recursive `Reverse` type.
+`Reverse` should take in an array as a type parameter `T` and return an array that consists of:
+
+1. The first element in `T`
+2. ...a rest of the result of `Reverse` on the remaining elements of `T`
+
+> Fans of functional programming may recognize this as a very functional way of reversing a list!
+
+## Specification
+
+Write a `Reverse` type that takes in one type parameter that must be an array: `T`.
+
+It should result in a reversed array or tuple type of `T`'s elements.
+
+## Examples
+
+- `Reverse<number[]>` -> `number[]`
+- `Reverse<(number | string)[]>` -> `(number | string)[]` (which may also be written as `(string | number)[]`)
+- `Reverse<['a', 'b', 'c']>` -> `['c', 'b', 'a']`
+
+## Files
+
+- `index.ts`: Write your `Reverse` type here
+- `solution.ts`: Solution code

projects/type-operations/array-type-shenanigans/02-reverse/README.md

@@ -0,0 +1 @@
+export {};

projects/type-operations/array-type-shenanigans/02-reverse/index.d.ts

@@ -0,0 +1,17 @@
+import { Reverse } from "~/index";
+
+function expectTypeExtends<T, U extends T>() {}
+
+expectTypeExtends<[], Reverse<[]>>();
+
+expectTypeExtends<[number], Reverse<[number]>>();
+
+expectTypeExtends<[1, number], Reverse<[number, 1]>>();
+
+expectTypeExtends<["b", string, "a"], Reverse<["a", string, "b"]>>();
+
+expectTypeExtends<string[], Reverse<string[]>>();
+
+expectTypeExtends<(number | string)[], Reverse<(number | string)[]>>();
+
+expectTypeExtends<[["a", ["b"]], number], Reverse<[number, ["a", ["b"]]]>>();

projects/type-operations/array-type-shenanigans/02-reverse/index.test.d.ts

@@ -0,0 +1,2 @@
+// Write your Reverse type here! ✨
+// You'll need to export it so the tests can run it.

projects/type-operations/array-type-shenanigans/02-reverse/index.test.ts

@@ -0,0 +1,6 @@
+export declare type Reverse<T extends any[]> = T extends [
+	infer First,
+	...infer Rest
+]
+	? [...Reverse<Rest>, First]
+	: T;

projects/type-operations/array-type-shenanigans/02-reverse/index.ts

@@ -0,0 +1,3 @@
+export type Reverse<T extends any[]> = T extends [infer First, ...infer Rest]
+	? [...Reverse<Rest>, First]
+	: T;

projects/type-operations/array-type-shenanigans/02-reverse/solution.d.ts

@@ -0,0 +1,9 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"paths": {
+			"~/index": ["./index.ts"]
+		}
+	},
+	"include": ["./index.test.ts"]
+}

projects/type-operations/array-type-shenanigans/02-reverse/solution.ts

@@ -0,0 +1,9 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"paths": {
+			"~/index": ["./solution.ts"]
+		}
+	},
+	"include": ["./index.test.ts"]
+}

projects/type-operations/array-type-shenanigans/02-reverse/tsconfig.json

@@ -0,0 +1,19 @@
+# Step 3: Zip
+
+Let's crank things up a little bit with array spreads and rests.
+This step won't introduce any new concepts.
+You'll be using the same concepts from the last two steps more.
+
+Write a `Zip` type that takes in two array types, `T` and `U`.
+It should "zip" them together akin to the behavior of [Lodash's `zip`](https://lodash.com/docs/4.17.15#zip).
+
+## Examples
+
+- `Zip<["a"], [1]>` -> `["a", 1]`
+- `Zip<["a", "b"], [1]>` -> `["a", 1, "b"]`
+- `Zip<["a", "b"], [1, 2, 3]>` -> `["a", 1, "b", 2, 3]`
+
+## Files
+
+- `index.ts`: Write your `Zip` type here
+- `solution.ts`: Solution code

projects/type-operations/array-type-shenanigans/02-reverse/tsconfig.test.json

@@ -0,0 +1 @@
+export {};

projects/type-operations/array-type-shenanigans/03-zip/README.md

@@ -0,0 +1,27 @@
+import { Zip } from "~/index";
+
+function expectTypeExtends<T, U extends T>() {}
+
+expectTypeExtends<[], Zip<[], []>>();
+
+expectTypeExtends<[number], Zip<[number], []>>();
+
+expectTypeExtends<[number, string], Zip<[number], [string]>>();
+
+expectTypeExtends<[string], Zip<[], [string]>>();
+
+expectTypeExtends<["a", 1, 2, 3], Zip<["a"], [1, 2, 3]>>();
+
+expectTypeExtends<["a", 1, "b", 2, 3], Zip<["a", "b"], [1, 2, 3]>>();
+
+expectTypeExtends<["a", 1, "b", 2, "c", 3], Zip<["a", "b", "c"], [1, 2, 3]>>();
+
+expectTypeExtends<
+	["a", 1, "b", 2, "c", 3, "d"],
+	Zip<["a", "b", "c", "d"], [1, 2, 3]>
+>();
+
+expectTypeExtends<
+	["a", 1, "b", 2, "c", 3, "d", "e"],
+	Zip<["a", "b", "c", "d", "e"], [1, 2, 3]>
+>();

projects/type-operations/array-type-shenanigans/03-zip/index.d.ts

@@ -0,0 +1,2 @@
+// Write your Zip type here! ✨
+// You'll need to export it so the tests can run it.

projects/type-operations/array-type-shenanigans/03-zip/index.test.d.ts

@@ -0,0 +1,8 @@
+export declare type Zip<T extends any[], U extends any[]> = T extends [
+	infer FirstT,
+	...infer RestT
+]
+	? U extends [infer FirstU, ...infer RestU]
+		? [FirstT, FirstU, ...Zip<RestT, RestU>]
+		: [...T]
+	: U;

projects/type-operations/array-type-shenanigans/03-zip/index.test.ts

@@ -0,0 +1,8 @@
+export type Zip<T extends any[], U extends any[]> = T extends [
+	infer FirstT,
+	...infer RestT
+]
+	? U extends [infer FirstU, ...infer RestU]
+		? [FirstT, FirstU, ...Zip<RestT, RestU>]
+		: [...T]
+	: U;

projects/type-operations/array-type-shenanigans/03-zip/index.ts

@@ -0,0 +1,9 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"paths": {
+			"~/index": ["./index.ts"]
+		}
+	},
+	"include": ["./index.test.ts"]
+}

projects/type-operations/array-type-shenanigans/03-zip/solution.d.ts

@@ -0,0 +1,9 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"paths": {
+			"~/index": ["./solution.ts"]
+		}
+	},
+	"include": ["./index.test.ts"]
+}

projects/type-operations/array-type-shenanigans/03-zip/solution.ts

@@ -0,0 +1,33 @@
+# Array Type Shenanigans
+
+> A [Learning TypeScript > Type Operations](https://learning-typescript.com/type-operations) 🥗 appetizer project.
+
+Hi!
+This is Josh, author of _Learning TypeScript_.
+Congrats on making it all the way through the book to the final chapter!
+Type operations are a ton of fun to play around with once you get the hang of them.
+
+These appetizer projects showcase a bunch of my favorite cool things you can do using array and/or tuple types with conditional types.
+Each gives a small into to the new thing because it can be tricky to find out the ways you can or cannot combine type operations.
+There's no silly theme, to help not distract from learning those new things.
+
+I hope you're enjoying the book and these projects! 💖
+
+## Setup
+
+Start the TypeScript compiler in watch mode:
+
+```shell
+tsc --watch
+```
+
+## Steps
+
+- [1. Flat Filter](./01-flat-filter)
+- [2. Reverse](./02-reverse)
+- [3. Zip](./03-zip)
+
+## Notes
+
+- Don't import code from one step into another.
+- You'll be working entirely in the type system. There will be no runtime code. 🤘

projects/type-operations/array-type-shenanigans/03-zip/tsconfig.json

@@ -0,0 +1,4 @@
+{
+	"label": "🥗 Array Type Shenanigans",
+	"position": 1
+}

projects/type-operations/array-type-shenanigans/03-zip/tsconfig.test.json

@@ -0,0 +1,7 @@
+{
+	"name": "type-shenanigans",
+	"scripts": {
+		"test": "tsc",
+		"test:solutions": "tsc -p ./tsconfig.test.json"
+	}
+}

projects/type-operations/array-type-shenanigans/README.md

@@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"composite": true
+	},
+	"references": [
+		{ "path": "./01-flat-filter/tsconfig.json" },
+		{ "path": "./02-reverse/tsconfig.json" },
+		{ "path": "./03-zip/tsconfig.json" }
+	]
+}

projects/type-operations/array-type-shenanigans/_category_.json

@@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"composite": true
+	},
+	"references": [
+		{ "path": "./01-flat-filter/tsconfig.test.json" },
+		{ "path": "./02-reverse/tsconfig.test.json" },
+		{ "path": "./03-zip/tsconfig.test.json" }
+	]
+}