📝 update easy topic

Author: exploitationExplorers

docs/.vitepress/config.mts

@@ -23,7 +23,15 @@ export default defineConfig({
           text: '挑战',
           items: [
             { text: '挑战介绍', link: '/challenges/' },
-            { text: '简单', link: '/challenges/easy/' },
+            { text: '简单', 
+              items: [
+                { text: '实现Pick', link: '/challenges/easy/pick' },
+                { text: '元组转换为对象', link: '/challenges/easy/tuples' },
+                { text: '实现Readonly', link: '/challenges/easy/readonly' },
+                { text: '实现Awaited', link: '/challenges/easy/awaited' },
+                { text: '实现Parameters', link: '/challenges/easy/paramEters' },
+              ]
+             },
             { text: '中等', link: '/challenges/medium/' },
             { text: '困难', link: '/challenges/hard/' },
             { text: '地狱', link: '/challenges/extreme/' }

docs/challenges/easy/awaited.md

@@ -0,0 +1,72 @@
+---
+title: 实现Awaited
+---
+
+# {{ $frontmatter.title }}
+
+## 题目描述
+
+假如我们有一个 Promise 对象，这个 Promise 对象会返回一个类型。在 TS 中，我们用 `Promise<T>` 中的 T 来描述这个 Promise 返回的类型。请你实现一个类型，可以获取这个类型。
+
+例如：`Promise<ExampleType>`，请你返回 ExampleType 类型。
+
+```ts
+type ExampleType = Promise<string>;
+
+type Result = MyAwaited<ExampleType>; // string
+```
+
+## 分析
+
+```ts
+type MyAwaited<T> = T extends Promise<infer R> ? R : never;
+
+type Case1 = MyAwaited<Promise<string>>; // string
+```
+
+但是实际的场景中，还会存在 `Promise` 嵌套的场景:
+
+```ts
+type MyAwaited<T> = T extends Promise<infer R> ? R : never;
+
+type Case2 = MyAwaited<Promise<Promise<string>>>; // Promise<string>
+```
+
+此时由于嵌套，并不能得到预期的最终的返回类型。此时就需要递归上场了，简单改写，如下：
+
+```ts
+type MyAwaited<T> = T extends Promise<infer R> ? MyAwaited<R> : T;
+
+type Case2 = MyAwaited<Promise<Promise<string>>>; // string
+type Case3 = MyAwaited<Promise<Promise<Promise<string>>>>; // string
+```
+
+## 题解
+
+在题目的 Case 中，存在如下场景：
+
+```ts
+type T = { then: (onfulfilled: (arg: number) => any) => any };
+
+// 期望 MyAwaited<T> = number
+```
+
+也就是还需要处理 类似 promise 的场景，根据题目 case，可以写出如下代码：
+
+```ts
+type MyAwaited<T> = T extends
+  | Promise<infer R>
+  | { then: (onfullfilled: (arg: infer R) => any) => any }
+  ? MyAwaited<R>
+  : T;
+```
+
+利用 `|` 覆盖 普通的 `Promise` 和 `then` 两种场景。
+
+这里还有一点值得一提的是，当联合类型位于 `extends` 右侧时，并没有分发特性，虽然判断会做多次，但是其多次判断的结果会以或的方式合并后交由 `extends` 的逻辑处理，比如，`'a' extends 'a' | 'b' ? 1 : 2`，此时，可以理解为会进行 `'a' extends 'a'` 以及 `'a' extends 'b'`两次判断，两者有一处为 true 即返回 1，否则返回 2。但是并不会返回 `1 | 2`。
+
+## 知识点
+
+1. `A extends Promise<infer R>`，匹配推断类型
+2. 递归解决嵌套问题
+3. 联合类型位于 `extends` 右侧时不分发

docs/challenges/easy/index.md

@@ -52,4 +52,3 @@ type MyReadonly<T> = {
 1. `[P in keyof T]` 遍历 对象类型(数组也是对象)
 2. `readonly` 增加修饰符即可
 
-<CartoonPlane/>

docs/challenges/easy/paramEters.md

@@ -0,0 +1,55 @@
+---
+title: 实现Parameters
+---
+
+# {{ $frontmatter.title }}
+
+## 题目描述
+
+实现内置的 `Parameters<T>` 类型，而不是直接使用它。
+
+例如：
+
+```ts
+const foo = (arg1: string, arg2: number): void => {};
+
+// [arg1: string, arg2: number]
+type FunctionParamsType = MyParameters<typeof foo>;
+```
+
+## 分析
+
+使用 `A extends infer B` 这样的匹配推断，不过这里推断的是函数的参数。可以先从一个参数推断开始：
+
+```ts
+// infer 处于第一个参数的位置，故可以得到第一个参数
+// 如果函数没有第一个参数，则会推断出来 unknown，并不会走 false 逻辑
+type MyFirstParameter<T> = T extends (arg: infer F) => any ? F : never;
+
+// Case1 = number;
+type Case1 = MyFirstParameter<(a: number) => {}>;
+
+// Case2 = unknown，特殊情况，没有参数
+type Case2 = MyFirstParameter<() => {}>;
+```
+
+同样的套路，推断第二个参数 or 第三个参数也可以很快写出来。
+
+那么推断所有参数类型呢？
+
+可以通过扩展操作符进行。
+
+## 题解
+
+```ts
+type Parameters<T extends (...args: any) => any> =
+  // 扩展操作符，推断出 P
+  T extends (...args: infer P) => any ? P : never;
+```
+
+## 知识点
+
+1. 函数类型，也可以做推断匹配，`A extends (...args: infer P) => infer R`
+2. 函数类型，推断匹配时，使用扩展操作符
+
+这里需要注意的就是写法，和元组的推断不同，函数参数的推断必须注明参数名称(名称随便起，并不重要，也不需要和实际参数名称一致，只是占个位置而已)。

docs/challenges/easy/pick.md

@@ -0,0 +1,76 @@
+---
+title: 实现Pick
+---
+
+# {{ $frontmatter.title }}
+
+## 题目描述
+
+实现 TS 内置的 `Pick<T, K>`，但不可以使用它。
+
+**从类型 `T` 中选择出属性 `K`，构造成一个新的类型**。
+
+例如：
+
+```ts
+interface Todo {
+  title: string;
+  description: string;
+  completed: boolean;
+}
+
+type TodoPreview = MyPick<Todo, 'title' | 'completed'>;
+
+const todo: TodoPreview = {
+  title: 'Clean room',
+  completed: false,
+};
+```
+
+## 分析
+
+此题的核心在于对 对象类型 的遍历并修改，对 对象类型的遍历方法如下：
+
+```ts
+type Copy<T> = {
+  [P in keyof T]: T[P];
+};
+
+type Case1 = Copy<{ a: string; b: string }>;
+```
+
+`keyof T` 本身是个联合类型，`[P in keyof T]` 便是将联合类型取出作为新类型的键值， 在上例中，流程如下：
+
+```ts
+// step1: keyof T: 'a' | 'b'
+// ['a']: T['a'] (也就是 string)
+// ['b']: T['b'] (也就是 string)
+// type Case1 = { a: string, b: string }
+type Case1 = Copy<{ a: 1; b: 2 }>;
+```
+
+## 题解
+
+理解了上述遍历的行为后，实现 `Pick` 就非常简单了，只需要把 `keyof T` 这个联合类型换成入参的 `K` 即可：
+
+```ts
+type MyPick<T, K extends keyof T> = {
+  [P in K]: T[P];
+};
+
+// P in 'a' | 'b'
+// ['a']: T['a']
+// ['b']: T['b']
+// type Case2 = { a: string, b: string }
+type Case2 = MyPick<{ a: string; b: string; c: string }, 'a' | 'b'>;
+```
+
+注意：上述需要对 `K` 进行约束，也就是 `K extends keyof T`，因为 K 如果不是类型的键值的话，需要进行类型约束，否则 `T[P]` 将会因为访问不到类型而报错。
+
+## 知识点
+
+1. `[P in keyof T]: T[P]` 遍历 对象类型/数组类型
+2. `[P in K]: T[P]` ，根据传入的 K 进行遍历，此时 K 需要满足 `K extends keyof T`
+
+
+<CartoonPlane/>

docs/challenges/easy/readonly.md

@@ -0,0 +1,53 @@
+---
+title: 实现Readonly
+---
+
+# {{ $frontmatter.title }}
+
+## 题目描述
+
+不要使用内置的 `Readonly<T>`，自己实现一个。
+
+该 `Readonly` 会接收一个 泛型参数，并返回一个完全一样的类型，只是所有属性都会被 `readonly` 所修饰。
+
+也就是不可以再对该对象的属性赋值。
+
+例如：
+
+```ts
+interface Todo {
+  title: string;
+  description: string;
+}
+
+const todo: MyReadonly<Todo> = {
+  title: 'Hey',
+  description: 'foobar',
+};
+
+todo.title = 'Hello'; // Error: cannot reassign a readonly property
+todo.description = 'barFoo'; // Error: cannot reassign a readonly property
+```
+
+## 分析
+
+这一题，本质也是对对象类型进行遍历，然后为每一个属性增加 `readonly` 的修饰符，只需要在遍历的时候为每一个属性增加只读修饰符。
+
+```ts
+type MyReadonly<T> = {
+  readonly [P in keyof T]: T[P];
+};
+```
+
+## 题解
+
+```ts
+type MyReadonly<T> = {
+  readonly [P in keyof T]: T[P];
+};
+```
+
+## 知识点
+
+1. `[P in keyof T]` 遍历 对象类型(数组也是对象)
+2. `readonly` 增加修饰符即可

docs/challenges/easy/tuples.md

@@ -0,0 +1,81 @@
+---
+title: 元组转换为对象
+---
+
+# {{ $frontmatter.title }}
+
+## 题目描述
+
+传入一个元组类型，将这个元组类型转换为对象类型，这个对象类型的键/值都是从元组中遍历出来。
+
+例如：
+
+```ts
+const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const;
+
+// expected { tesla: 'tesla', 'model 3': 'model 3',
+// 'model X': 'model X', 'model Y': 'model Y' }
+type result = TupleToObject<typeof tuple>;
+```
+
+## 分析
+
+此题目标是生成一个新的对象类型，其键值和属性值就是传入的元组的每一项的值，在前面的题目中我们了解了遍历一个对象的方法，加以改动，就可以改为生成一个对象的方法，如下，给定一个联合类型 `'a' | 'b'`，生成一个新的对象：
+
+```ts
+// PropertyKey 是 ts 内置类型：type PropertyKey = string | number | symbol
+type Test<K extends PropertyKey> = {
+  [P in K]: P;
+};
+
+// ['a']: 'a'
+// ['b']: 'b'
+// Case1 = { a: 'a', b: 'b' }
+type Case1 = Test<'a' | 'b'>;
+```
+
+目前就比较接近了，但是题目给的是元组，所以需要把元组转换成联合类型，可以使用官方提供的 `T[number]` 写法，即可将元组转换为联合类型，
+
+```ts
+type Tuple = [string, number];
+
+type Case2 = Tuple[number]; // string | number
+```
+
+```ts
+// 平时工作中经常在不清楚全部属性名称的时候，会 [key: string] 来代替具体的属性名称
+type MyObject<T> = {
+  [key: string]: T;
+};
+
+// Case1 = T = number | string
+type Case1 = MyObject<number | string>[string];
+```
+
+而数组的 `T[number]` 访问与此类似：
+
+```ts
+// 类数组的类型声明
+type MyArrayLike<T> = {
+  [key: number]: T;
+};
+// MyArrayLike<string> 的属性有 number
+// 所以可以通过索引签名访问的特性访问到 MyArrayLike<string>[number]
+type Case3 = ArrayLike<string>[number];
+```
+
+## 题解
+
+了解了元组转为联合类型的方法后，答案也就呼之欲出了：
+
+```ts
+type TupleToObject<T extends readonly PropertyKey[]> = {
+  [P in T[number]]: P;
+};
+```
+
+这里也是，需要对输入的元组进行类型限制，其元素必须是 `PropertyKey`(ts 内置类型: `type PropertyKey = string | number | symbol`)。
+
+## 知识点
+
+1. `T[number]` 索引签名访问，元组转联合类型