✨ add medium topic and fix some style

Author: exploitationExplorers

docs/.vitepress/config.mts

@@ -32,7 +32,30 @@ export default defineConfig({
                 { text: '实现Parameters', link: '/challenges/easy/paramEters' },
               ]
              },
-            { text: '中等', link: '/challenges/medium/' },
+            { text: '中等',
+              items: [
+                { text: '实现Absolute', link: '/challenges/medium/Absolute' },
+                { text: '实现Capitalize', link: '/challenges/medium/Capitalize' },
+                { text: '百分比解析器', link: '/challenges/medium/percentageParser' },
+                { text: '获取函数返回类型', link: '/challenges/medium/function-return' },
+                { text: '计算字符的长度', link: '/challenges/medium/character-length' },
+                { text: '实现DeepReadonly', link: '/challenges/medium/DeepReadonly' },
+                { text: '实现ReplaceAll', link: '/challenges/medium/ReplaceAll' },
+                { text: '实现TrimLeft', link: '/challenges/medium/TrimLeft' },
+                { text: '实现TrimRight', link: '/challenges/medium/TrimRight' },
+                { text: '实现Trim', link: '/challenges/medium/Trim' },
+                { text: '实现Diff', link: '/challenges/medium/Diff' },
+                { text: '实现Omit', link: '/challenges/medium/Omit' },
+                { text: '实现ReadonlyKeys', link: '/challenges/medium/ReadonlyKeys' },
+                { text: '实现Flatten', link: '/challenges/medium/Flatten' },
+                { text: '实现Merge', link: '/challenges/medium/Merge' },
+                { text: '实现Promise.all', link: '/challenges/medium/Promise.all' },
+                { text: '实现Replace', link: '/challenges/medium/Replace' },
+                { text: '实现KebabCase', link: '/challenges/medium/KebabCase' },
+                { text: '实现Pop', link: '/challenges/medium/Pop' },
+                { text: '最后一个元素', link: '/challenges/medium/lastOne' },
+              ]
+             },
             { text: '困难', link: '/challenges/hard/' },
             { text: '地狱', link: '/challenges/extreme/' }
           ]

docs/challenges/medium/Absolute.md

@@ -0,0 +1,44 @@
+---
+title: 实现Absolute
+---
+
+# {{ $frontmatter.title }}
+
+## 题目描述
+
+实现一个接收 string,number 或 bigInt 类型参数的`Absolute`类型,返回一个正数字符串。
+
+例如
+
+```ts
+type Test = -100;
+type Result = Absolute<Test>; // expected to be "100"
+```
+
+## 分析
+
+这个题本质也是字符的推断匹配，但是由于入参是 number 类型的，所以在进行推断匹配前需要进行一次转化，对于 ts 来讲，也非常简单：
+
+```ts
+type NumberToString<T extends number> = `${T}`;
+
+// Case1 = '100'
+type Case1 = NumberToString<100>;
+```
+
+转换成字符后，可以直接进行 `-` 号的匹配，有 `-` 号，就只保留剩余的字符，否则全部保留即可。
+
+## 题解
+
+```ts
+type Absolute<T extends number | string | bigint> = `${T}` extends `-${infer S}`
+  ? // 有 - 号，保留剩余的字符
+    `${S}`
+  : // 否则保留原字符即可
+    `${T}`;
+```
+
+## 知识点
+
+1. number 转 string
+2. 字符推断匹配套路： `` A extends `-${infer R}`  ``

docs/challenges/medium/AnyOf.md

@@ -0,0 +1,51 @@
+---
+title: AnyOf
+---
+
+# {{ $frontmatter.title }}
+
+## 题目描述
+
+在类型系统中实现类似于 Python 中 `any` 函数。类型接收一个数组，如果数组中任一个元素为真，则返回 `true`，否则返回 `false`。如果数组为空，返回 `false`。
+
+例如：
+
+```ts
+type Sample1 = AnyOf<[1, '', false, [], {}]>; // expected to be true.
+type Sample2 = AnyOf<[0, '', false, [], {}]>; // expected to be false.
+```
+
+## 分析
+
+这个题目看起来只需要遍历一次元组，遇到 false 元素，就继续递归判断剩余元素，否则就返回 true，直到遍历结束，那么就返回 false。
+
+所以问题就转换问，怎么判断一个元素为 false，从这道题目的 case 中推断，可以认为：
+
+`0 | false | '' | [] | undefined | null | {}` 是 false。
+
+可以通过定义一个 Zerolist 的类型，`A extends Zerolist` 就简单认为这个元素是 false。
+
+## 题解
+
+```ts
+export type Equal<X, Y> = (<T>() => T extends X ? 1 : 2) extends <
+  T,
+>() => T extends Y ? 1 : 2
+  ? true
+  : false;
+
+type Zerolist = 0 | false | '' | [] | undefined | null;
+
+type AnyOf<T extends readonly any[]> = T extends [infer F, ...infer R]
+  ? F extends Zerolist
+    ? AnyOf<R>
+    : // 单独处理 {} 的判定
+    Equal<F, {}> extends true
+    ? AnyOf<R>
+    : true
+  : false;
+```
+
+## 知识点
+
+1. `[] ｜ Function | { a: any } extends {}` 为 true

docs/challenges/medium/AppendToObject.md

@@ -0,0 +1,72 @@
+---
+title: AppendToObject
+---
+
+# {{ $frontmatter.title }}
+
+## 题目描述
+
+实现一个为接口添加一个新字段的类型。该类型接收三个参数，返回带有新字段的接口类型。
+
+例如:
+
+```ts
+type Test = { id: '1' };
+type Result = AppendToObject<Test, 'value', 4>; // expected to be { id: '1', value: 4 }
+```
+
+## 分析
+
+这题操作的类型时对象，在对象上新增属性，相比较之前的 [实现 Omit](/medium/实现Omit.md) 要简单很多，只需要根据传入的参数生成新的类型，同当前类型交叉即可得到结果。
+
+## 题解
+
+```ts
+type Merge<T> = {
+  [P in keyof T]: T[P];
+};
+
+type AppendToObject<T, U extends string, V> = Merge<
+  T & {
+    [K in U]: V;
+  }
+>;
+```
+
+核心在于 `T & { [L in U]: V }`，其实到这里应该有同学提出疑惑了，为什么需要 `Merge` 包裹一层？
+
+原因具体不清楚，但是可以直接从表现上来看：
+
+```ts
+export type Equal<X, Y> = (<T>() => T extends X ? 1 : 2) extends <
+  T,
+>() => T extends Y ? 1 : 2
+  ? true
+  : false;
+
+type A = {
+  a: number;
+  b: number;
+};
+
+type B = {
+  a: number;
+} & {
+  b: number;
+};
+
+type Merge<T> = {
+  [P in keyof T]: T[P];
+};
+
+// false
+type Case1 = Equal<A, B> extends true ? true : false;
+
+// true
+type Case2 = Equal<A, Merge<B>> extends true ? true : false;
+```
+
+## 知识点
+
+1. 对象交叉
+2. 交叉后的对象 Merge

docs/challenges/medium/Capitalize.md

@@ -0,0 +1,35 @@
+---
+title: 实现Capitalize
+---
+
+# {{ $frontmatter.title }}
+
+## 题目描述
+
+实现 `Capitalize<T>` 它将字符串的第一个字母转换为大写，其余字母保持原样。
+
+例如
+
+```ts
+type capitalized = Capitalize<'hello world'>; // expected to be 'Hello world'
+```
+
+## 分析
+
+思路其实比较简单，就是找到第一个字符，大写之后和其余字符拼接即可。
+
+这里值得一提的是 ts 本身自带这个方法，可以参考 官方文档 `uppercasestringtype`，但是其定义的地方是 intrinsic，我们看不到。
+
+同时 Ts 还自带了大写整个字符的方法 Uppercase， 想要实现本题目，可以通过推断匹配的方式选出第一个字符后，大写该字符，并和原字符拼接即可。
+
+## 题解
+
+```ts
+type MyCapitalize<S extends string> = S extends `${infer F}${infer R}`
+  ? `${Uppercase<F>}${R}`
+  : '';
+```
+
+## 知识点
+
+1. 字符串推断匹配： `` A extends `${infer F}${infer R}`  ``

docs/challenges/medium/DeepReadonly.md

@@ -0,0 +1,100 @@
+---
+title: 实现DeepReadonly
+---
+
+# {{ $frontmatter.title }}
+
+## 题目描述
+
+实现一个通用的`DeepReadonly<T>`，它将对象的每个参数及其子对象递归地设为只读。
+
+您可以假设在此挑战中我们仅处理对象。数组，函数，类等都无需考虑。但是，您仍然可以通过覆盖尽可能多的不同案例来挑战自己。
+
+例如
+
+```ts
+type X = {
+  x: {
+    a: 1;
+    b: 'hi';
+  };
+  y: 'hey';
+};
+
+type Expected = {
+  readonly x: {
+    readonly a: 1;
+    readonly b: 'hi';
+  };
+  readonly y: 'hey';
+};
+
+type Todo = DeepReadonly<X>; // should be same as `Expected`
+```
+
+## 分析
+
+```ts
+type DeepReadonly<T> = {
+  readonly [P in keyof T]: T[P] extends {} ? DeepReadonly<T[P]> : T[P];
+};
+```
+
+通过 `T[P] extends {} ? DeepReadonly<T[P]> : T[P]` 对属性值进行二次判断，如果是继承自 对象，那么就递归处理，否则返回原始属性值。
+
+理论上这样就能够结束本题目，但是还存在两个特殊场景，元组和函数，都继承自对象 `{}`。
+
+```ts
+type Case1 = [] extends {} ? true : false; // true
+type Case2 = (() => {}) extends {} ? true : false; // true
+```
+
+对于元组，之前其实也比较隐晦的提到过，元组的遍历，可以通过和对象一摸一样的遍历手段进行：
+
+```ts
+type Traverse<T> = {
+  [P in keyof T]: T[P];
+};
+
+type Case3 = Traverse<[1, 2, 3]>; // [1, 2, 3]
+```
+
+元组的遍历就是这样，同对象一样，也可以增加 `readonly` 等修饰符。故这一场景可以忽略。
+
+但是对于函数来讲，就出现了错误：
+
+```ts
+type DeepReadonly<T> = {
+  readonly [P in keyof T]: T[P] extends {} ? DeepReadonly<T[P]> : T[P];
+};
+
+// Case4 = {}
+type Case4 = DeepReadonly<() => {}>;
+
+// Case5 = never
+type Case5 = keyof (() => {});
+```
+
+对于函数执行遍历，那么由于 `keyof (() => {})` 是 `never`，新的类型的属性就为空，从而返回 `{}`。
+
+所以对于此题，只需要增加函数的额外处理即可。
+
+## 题解
+
+```ts
+type DeepReadonly<T> = {
+  readonly [P in keyof T]: T[P] extends Function
+    ? T[P]
+    : T[P] extends {}
+    ? DeepReadonly<T[P]>
+    : T[P];
+};
+```
+
+增加函数的场景判断即可。
+
+## 知识点
+
+1. 递归处理嵌套问题
+2. 元组可以使用遍历对象的方法进行遍历
+3. `(() => {}) extends {}` 结果为 true

docs/challenges/medium/Diff.md

@@ -0,0 +1,44 @@
+---
+title: 实现Diff
+---
+
+# {{ $frontmatter.title }}
+
+## 题目描述
+
+获取两个接口类型中的差值属性。
+
+```ts
+type Foo = {
+  a: string;
+  b: number;
+};
+type Bar = {
+  a: string;
+  c: boolean;
+};
+
+type Result1 = Diff<Foo, Bar>; // { b: number, c: boolean }
+type Result2 = Diff<Bar, Foo>; // { b: number, c: boolean }
+```
+
+## 分析
+
+这道题目其实就比较宽泛了，获取只存在于 A 或 只存在于 B 中的属性，网上有很多借助 `Omit`, `Exclude`, `&` 的解法，我认为都不太直观，其实借助 `as` 非常好实现。关于 `as` 可以参考 [实现 Omit](/medium/实现Omit.md) 中介绍的部分。
+
+首先通过 `keyof A | keyof B` 可以获取所有的属性，接下来只需要让即存在于 A 中的属性 又存在于 B 中的属性为 never 即可去除该属性，也就是 `P extends keyof A & keyof B ? never : P`。讲到这里题解基本就出来了。
+
+## 题解
+
+```ts
+type Diff<O, O1> = {
+  // keyof O | keyof O1 拿到所有的属性中，通过 keyof O & keyof O1 判断是否是公共属性，如是公共属性，置为 never
+  [P in keyof O | keyof O1 as P extends keyof O & keyof O1
+    ? never
+    : P]: P extends keyof O ? O[P] : P extends keyof O1 ? O1[P] : never; // 补充属性值即可
+};
+```
+
+## 知识点
+
+1. 同 [实现 Omit](/medium/实现Omit.md)。