TypeScript 类型体操练习笔记（二）

进度（90 /188）

其中标记 ※ 的是我认为比较难或者涉及新知识点的题目

刷题也许没有什么意义，但是喜欢一个人思考一整天的灵光一现，也喜欢看到新奇的答案时的恍然大悟，仅此而已。

42. Medium - 1130 - ReplaceKeys ※

实现一个类型 ReplaceKeys，用于替换联合类型中的键，如果某个类型不包含该键则跳过替换。该类型接受三个参数。

一开始我只是想这么写，我想分布式条件类型 + Pick + Omit 来实现。

1type ReplaceKeys<U, T, Y> = U extends any 
2 ? Omit<U, T & keyof U> & Pick<Y, T & keyof U & keyof Y>
3 : any
4

理论上 case1 是能通过的，但是一直报错。然后我又试了一下，看来判断的 Equal 不认为这两种是相等的：

1type T1 = { a: number }
2type T2 = { b: number }
3type E = Equal<T1 & T2, { a: number, b: number }> // false
4

不过还是有办法的，我们可以通过一层映射把交叉类型拍平：

1type IntersectionToObj<T> = {
2  [K in keyof T]: T[K]
3}
4type E1 = Equal<IntersectionToObj<T1 & T2>, { a: number, b: number }> // true
5

不过我试了下第二个 case 还是不太好实现，那就直接用映射类型来解决。

利用分布式特性处理联合元素，然后遍历 U 的属性然后按要求进行处理即可。

1type ReplaceKeys<U, T, Y> = U extends any
2  ? {
3    [K in keyof U]: K extends T ? (K extends keyof Y ? Y[K] : never) : U[K]
4  }
5  : never // 不会进入这个分支
6

但是看到别人的答案我又开始困惑了：

1type ReplaceKeys<U, T, Y> = {
2  [K in keyof U]: K extends T ? (K extends keyof Y ? Y[K] : never) : U[K]
3}
4

查了半天只有这个 pr ，官方文档里也没有明确说明。

形如 { [P in keyof T]: X } 的映射类型（其中 T 是类型参数）被称为 isomorphic mapped type（同构映射类型），因为它会产生一个与 T 具有相同结构的类型。通过此 PR，我们使同构映射类型的实例化在联合类型上具有分布性。

43. Medium - 1367 - Remove Index Signature 移除索引签名 ※

实现 RemoveIndexSignature<T>，移除一个对象类型的索引签名。

索引签名（Index Signature） 是 TypeScript 中用于描述对象中未明确声明的属性的类型。它允许你定义一个对象可以有任意数量的属性，只要这些属性的键和值符合指定的类型。

1interface StringDictionary {
2  [key: string]: string;  // 索引签名
3  // 表示该对象可以有任意多个属性，键必须是 string 类型，值也必须是 string 类型。
4}
5

和索引签名对应的是具体属性，这两种也可以混合使用，但是具体属性的类型必须是索引签名类型的子类型：

1interface MixedType {
2  // 具体属性
3  name: string;
4  age: number;
5  // 索引签名
6  [key: string]: string | number;  // 必须包含具体属性的类型
7}
8

要处理这个问题，就要针对索引签名的特点，他是一个宽泛的类型（string/number/symbol），而具体属性是一个字面量类型，比如 "name" ，我们依次判断它是否为 string，number 或 symbol 都不是则证明是具体属性，否则为索引签名。

1type RemoveIndexSignature<T> = {
2  [K in keyof T as
3  string extends K 
4    ? never
5    : number extends K 
6      ? never
7      : symbol extends K 
8        ? never
9        : K
10  ]: T[K]
11}`
12

在评论区看到一个很天才的解法

1type RemoveIndexSignature<T, P = PropertyKey> = {
2  [K in keyof T as P extends K? never : K extends P ? K : never]: T[K]
3}
4

其中 PropertyKey 上是 TypeScript 的内置类型 type PropertyKey = string | number | symbol;。它的判断过程如下：

1P extends K ? never : (K extends P ? K : never)  /* P = string | number | symbol */
2
3// becomes
4(string | number | symbol) extends K ? never : (K extends P ? K : never)
5
6// becomes
7| string extends K ? never : (K extends string ? K : never)
8| number extends K ? never : (K extends number ? K : never)
9| symbol extends K ? never : (K extends symbol ? K : never)
10

本质上和我们上面的写法是一样的，但是利用条件类型的分布性，一下子判断了三种类型。୧(๑•̀◡•́๑)૭

44. Medium - 1978 - Percentage Parser 百分比解析器

实现类型 PercentageParser。根据规则 /^(\+|\-)?(\d*)?(\%)?$/ 匹配类型 T。

匹配的结果由三部分组成，分别是：[正负号, 数字, 单位]，如果没有匹配，则默认是空字符串。

1type Sign = '+' | '-'
2type PercentageParser<A extends string> =
3  A extends `${infer F}%`
4  /** 存在 % */
5    ? F extends `${infer S extends Sign}${infer N}`
6      ? [S, N, '%']
7      : ['', F, '%']
8  /** 不存在 % */
9    : A extends `${infer S extends Sign}${infer N}`
10      ? [S, N, '']
11      : ['', A, '']
12

题目不难，加几个分支判断就可以了。或者这样写优雅一点（大概）：

1type SignParser<A extends string> = A extends `${infer S extends '+' | '-'}${infer N}` ? [S, N] : ['', A]
2type PercentageParser<A extends string> = A extends `${infer F}%` ? [...SignParser<F>, '%'] : [...SignParser<A>, '']
3

45. Medium - 2070 - Drop Char 删除字符

从字符串中剔除指定字符。

1type DropChar<S, C> = S extends `${infer F}${infer R}`
2  ? F extends C 
3    ? DropChar<R, C>
4    : `${F}${DropChar<R, C>}`
5  : ''
6

没有新的知识点，简单题。

46. Medium - 2257 - MinusOne 减一 ※

给定一个正整数作为类型的参数，要求返回的类型是该数字减 1。

有点意思的一道题目，没有新的知识点，但是类似于算法中的模拟题。需要递归加不同情况的判断，复杂度较高。

我先想到了一个比较搞的办法，生成长度为 T 的数组，然后移除一个元素，再获取数组长度。

1type MakeArray<T extends number, R extends any[] = []> =
2  R['length'] extends T ? R : MakeArray<T, [...R, any]>
3type MinusOne<T extends number> = 
4  MakeArray<T> extends [infer _F, ...infer R] ? R['length'] : never
5

1000 以内是可行的，但是再大就会出现错误：

1type A = MakeArray<1101> // error: 类型实例化过深，且可能无限。ts(2589)
2

那么只能换一种方法，通过模拟减法的方式实现，枚举最后一位即可，如果最后一位大于 0 则只需要操作最后一位，否则需要递归处理：

1type MinusOne2String<T extends string> =
2  T extends `${infer F}0` // 如果最后一位是0，则把此位改为9，然后递归处理（题目限定了是正数）
3  ? `${MinusOne2String<F>}9`
4  : T extends `${infer F}9` // 其他情况直接把最后一位减一
5  ? `${F}8`
6  : T extends `${infer F}8`
7  ? `${F}7`
8  : T extends `${infer F}7`
9  ? `${F}6`
10  : T extends `${infer F}6`
11  ? `${F}5`
12  : T extends `${infer F}5`
13  ? `${F}4`
14  : T extends `${infer F}4`
15  ? `${F}3`
16  : T extends `${infer F}3`
17  ? `${F}2`
18  : T extends `${infer F}2`
19  ? `${F}1`
20  : T extends `${infer F}1`
21  ? `${F}0`
22  : '0'
23// 100-1=099 这种情况需要删除前导零
24type removeLeadZero<T extends string> = 
25  T extends '0' ? '0' : T extends `0${infer R}` ? removeLeadZero<R> : T 
26// 删除前导零后，转换为数字类型
27type MinusOne<T extends number> = 
28  removeLeadZero<MinusOne2String<`${T}`>> extends `${infer X extends number}` ? X : 0
29

47. Medium - 2595 - PickByType

从 T 中选择可赋值给 U 的属性类型集合。

1type PickByType<T, U> = {
2  [K in keyof T as T[K] extends U ? K : never ]: T[K]
3}
4

送分题，知识点前面的题目都有涉及。

48. Medium - 2688 - StartsWith

实现 StartsWith<T, U>,接收两个 string 类型参数,然后判断 T 是否以 U 开头,根据结果返回 true 或 false。

1type StartsWith<T extends string, U extends string> =
2  T extends `${U}${infer F}` ? true : false
3

送分题+1，模板字符串类型基础。

49. Medium - 2693 - EndsWith

实现 EndsWith<T, U>,接收两个 string 类型参数,然后判断 T 是否以 U 结尾,根据结果返回 true 或 false。

1type EndsWith<T extends string, U extends string> =
2  T extends `${string}${U}` ? true : false
3

50. Medium - 2757 - PartialByKeys

实现一个通用的 PartialByKeys<T, K>，它接收两个类型参数 T 和 K。

K 指定应设置为可选的 T 的属性集。当没有提供 K 时，它就和普通的 Partial<T> 一样使所有属性都是可选的。

前面已经讲过 IntersectionToObj 这个小技巧，这里就比较简单了，其中 Partial 是内置的工具类型，可以把一个对象类型的全部属性都变成可选。

1type IntersectionToObj<T> = {
2  [K in keyof T]: T[K]
3}
4
5type PartialByKeys<T , K extends keyof T = keyof T> = 
6  IntersectionToObj< Omit<T, K> & Partial<Pick<T, K>> >
7

51. Medium - 2759 - RequiredByKeys

实现一个通用的 RequiredByKeys<T, K>，它接收两个类型参数 T 和 K。

K 指定应设为必选的 T 的属性集。当没有提供 K 时，它就和普通的 Required<T> 一样使所有的属性成为必选的。

和 PartialByKeys 本质上没有什么区别，Required 也是内置的工具类型，可以把一个对象类型的全部属性，用于将一个类型 T 中的所有属性转换为‌必填属性（即移除其可选性 ?）。

1type IntersectionToObj<T> = {
2  [K in keyof T]: T[K]
3}
4type RequiredByKeys<T, K extends keyof T = keyof T> =
5  IntersectionToObj<Omit<T, K> & Required<Pick<T, K>>>
6

52. Medium - 2793 - Mutable ※

实现一个通用的类型 Mutable<T>，使类型 T 的全部属性可变（非只读）。

这题不难，但是涉及到映射类型的一个语法，之前没有涉及过。mapped-types

1type Mutable<T extends object> ={
2  -readonly [K in keyof T]: T[K]
3}
4

53. Medium - 2852 - OmitByType

从类型 T 中选择不可赋值给 U 的属性成为一个新的类型。

直到了 as 和 Mapped Types 的用法，这也很简单，和之前的 Omit 没什么区别。

1type OmitByType<T, U> = {
2  [K in keyof T as T[K] extends U ? never : K]: T[K]
3}
4

54. Medium - 2946 - ObjectEntries

实现 Object.entries 的类型版本。

首先这题需要应用分布式条件类型，所以需要先构造一个由类型key组成的联合类型 U 然后 U extends ... 触发分布式。

1type ObjectEntries<T, U = keyof T> =
2  U extends keyof T ? [U, T[U]] : never
3

不过有个case 过不去。

1type eq = Equal<ObjectEntries<Partial<Model>>, ModelEntries> // false
2type o = ObjectEntries<Partial<Model>>
3// ["name", string | undefined] | ["age", number | undefined] | ["locations", string[] | null | undefined]
4

可以看到由于 Partial 导致每个类型都多了一个 undefined。很明显这里需要 Required，但是需要先了解一下它的特性。

1type r1 = Required<{ key?: undefined }> // {key: never}
2type r2 = Required<{ key: undefined }> // {key: undefined}
3type r3 = Required<{ key: string | undefined }> // {key: string | undefined}
4type r4 = Required<{ key?: string | undefined }>  // {key:string}
5

可以看到在存在 ? 时，Required 会删除类型中的 undefined，否则不会。

而此题的要求是：如果类型存在 ? 就删除 undefined，但是如果类型只有 undefined 则不处理。我只能说，题本身不难，但是描述的不清楚，只能看用例。

1type ObjectEntries<T, U = keyof T> =
2  U extends keyof T 
3    ? [U, [T[U]] extends [undefined] ? undefined : Required<T>[U]] 
4    : never
5

55. Medium - 3062 - Shift

实现类型版本的 Array.shift。

1type Shift<T extends any[]> = T extends [infer F, ...infer R] ? [...R] : []
2

infer 的基础应用，在最前面的 First of Array 就了解过了。

56. Medium - 3188 - Tuple to Nested Object

给一个只包含字符串类型的元组 T 和一个类型 U 递归构建一个对象。

1type TupleToNestedObject<T extends string[], U> = 
2  T extends [infer F extends string, ...infer R extends string[]] 
3    ? Record<F, TupleToNestedObject<R, U>> : U
4

每次提取数组中第一个元素，然后把该元素作为键，递归构造的对象作为值。

57. Medium - 3192 - Reverse

实现类型版本的数组反转 Array.reverse

1type Reverse<T extends any[]> = T extends [infer F, ...infer R] 
2  ? [...Reverse<R>, F]
3  : []
4

使用递归的方式，每次都把第一个元素移到最后一个。

58. Medium - 3196 - Flip Arguments

实现 lodash 中 _.flip 函数的类型版本。

类型转换函数 FlipArguments<T> 要求函数类型 T，并返回一个新的函数类型，该类型具有与 T 相同的返回类型但参数顺序颠倒。

1type FlipArguments<T extends Function> = 
2  T extends (...args: infer P) => infer R ? (...args: Reverse<P>) => R : never
3

通过 infer 获取函数的参数和返回值，并且通过上一题实现的 Reverse 将参数反转。

59. Medium - 3243 - FlattenDepth

递归展开数组至指定深度

首先需要实现一个铺平一次的函数，这个比较简单

1type FlattenOnce<A extends any[]> = A extends [infer F, ...infer R]
2  ? F extends any[] ? [...F, ...FlattenOnce<R>] : [F, ...FlattenOnce<R>]
3  : []
4

TypeScript 中无法进行数字计算，我们可以通过邪修实现，这点我们在前面的 MinusOne 已经实现，所以这里直接引用 MinusOne 就可以了。

1type FlattenDepth<T extends any[], depth extends number = 1> =
2  depth extends 0 // 判断深度为零，则已经不需要铺平了
3  ? T
4  : FlattenOnce<T> extends T // 判断是否铺平前后的结果一致，一致则不需要再处理了
5    ? T 
6    : FlattenDepth<FlattenOnce<T>, MinusOne<depth>>
7

当然我们可以用之前在里面用过的用数组记录数字的方法，只不过 TypeScript 中数组长度有限制，当然这一题中是没有问题的，嵌套最多才 5 层

1type FlattenDepth<T extends any[], depth = 1, depArr extends any[] = []> = 
2  depArr['length'] extends depth
3    ? T 
4    : FlattenOnce<T> extends T ? T : FlattenDepth<FlattenOnce<T>, depth, [...depArr, any]>
5

60. Medium - 3326 - BEM style string

使用块（Block）、元素（Element）、修饰符（Modifier）命名（BEM）是 CSS 中类的一种流行命名约定。

例如，块组件表示为 btn，依赖于块的元素表示为 btn__price，更改块样式的修饰符表示为 btn-big 或 btn__prise-warning。

实现 BEM<B，E，M>，从这三个参数生成字符串并集。其中 B 是字符串文字，E 和 M 是字符串数组（可以为空）。

1// 把A和B连接，先把B处理为联合类型，然后用S连接
2type JoinWithSeparator<A extends string, B extends string[], S extends string, B2Union extends string = B[number]> = 
3  B2Union extends any ? `${A}${S}${B2Union}` : never
4
5type BEM<B extends string, E extends string[], M extends string[]> = 
6  E['length'] extends 0 // 判断E是否为空
7    ? JoinWithSeparator<B, M, '--'> // 如果E为空, B和M连接
8    : M['length'] extends 0 // 判断M是否为空
9      ? JoinWithSeparator<B, E, '__'> // E不为空，M为空，把B和M连接
10      : JoinWithSeparator<JoinWithSeparator<B, E, '__'>, M, '--'> // 都不为空，先把B和E连接，然后再加上M
11

需要写一个辅助工具类型 JoinWithSeparator 用于连接一个字符和数组，逻辑有点小复杂，已经加了完整注释。

61. Medium - 3376 - InorderTraversal

实现二叉树中序遍历的类型版本。

如果会中序遍历二叉树这题就不难了，不会的可以先学学数据结构。

1type InorderTraversal<T extends TreeNode | null> = 
2 T extends null 
3   ? [] 
4   : [...InorderTraversal<T['left']>, T['val'], ...InorderTraversal<T['right']>]
5

比较麻烦的是，T extends null 语法无法判断第二个分支中 T 不为空，所以可以反过来，判断 T 是否为 TreeNode。

1type InorderTraversal<T extends TreeNode | null> =
2  T extends TreeNode
3  ? [
4    ...InorderTraversal<T['left']>,
5    T['val'],
6    ...InorderTraversal<T['right']>
7  ] : []
8

62. Medium - 4179 - Flip

实现 just-flip-object 的类型版本（把类型的键和值类型反转）。

1type Flip<T> = {
2  [K in keyof T as T[K] extends number | string | boolean ? `${T[K]}` : never]: K
3}
4

为了保证 T[K] 类型正确，加了一个 extends number | string | boolean 的限制。

63. Medium - 4182 - Fibonacci Sequence 斐波那契序列 ※

实现一个通用的 Fibonacci<T>，它接受一个数字 T 并返回其相应的斐波纳契数。

序列开始：1、1、2、3、5、8、13、21、34、55、89、144...

首先斐波纳契公式 f(n)=f(n-1)+f(n-2) 可以递归实现。由于 TypeScript 类型无法使用加法，所以我们通过数组的元素个数来变向进行计算，至于减法可以复用之前实现的 MinusOne。

1type FibonacciArray<T extends number, A extends any[] = []> =
2    T extends 1
3    ? [any]
4    : T extends 2
5      ? [any]
6      : [...FibonacciArray<MinusOne<MinusOne<T>>>, ...FibonacciArray<MinusOne<T>>]
7type Fibonacci<T extends number> = FibonacciArray<T>['length']
8

看了下别人的答案，优化空间还是很大的，下面是正向计算，Index 表示计算到了第 n 个数字，Cur 表示 f(n)，Prev 表示 f(n-1)

1type Fibonacci<
2  T extends number,
3  Index extends any[] = [any, any],
4  Cur extends any[] = [any],
5  Prev extends any[] = [any]
6> =
7  T extends 1 | 2
8    ? 1
9    : Index['length'] extends T
10      ? Cur['length']
11      : Fibonacci<T, [...Index, any], [...Cur, ...Prev], Cur>
12

64. Medium - 4260 - AllCombinations ※

实现 AllCombinations<S> 类型，该类型返回使用 S 中的字符所组成的所有字符串，每个字符最多使用一次。

1type AllCombinations<S extends string, P extends string = ''> =
2  S extends `${infer F}${infer R}` 
3    ? '' | F | `${F}${AllCombinations<`${R}${P}`>}` // S[0] 开头的所有排列情况
4      | AllCombinations<R, `${P}${F}`> // 除了 S[0] 开头以外的所有情况
5    : ''
6

很有意思的题目，实现一个字符串中字符的所有组合。我的解法是 AllCombinations<S, P> 表示获取字符串 ${S}${P} 中，以 S 每个字母开头的全排列组合。

所以 AllCombinations<S, ''> 就是答案，而它等于 S[0] 为开头的所有情况，再加上 AllCombinations<S.split(1), S[0]>（伪代码示例）

而 S[0] 为开头的所有情况，就是求 S[0] 连接剩余字符的全排列，也就是 AllCombinations<S.split(1), ''>

65. Medium - 4425 - Greater Than

在本次挑战中，你需要实现一个类似 T > U 的类型： GreaterThan<T, U>负数无需考虑。

这种题我可以说不难，就是有点恶心。我不喜欢！下面的代码我加了注释，应该可以看懂。

1type LengthOfString<S extends string> = Split<S>['length'];
2type FirstOfString<S extends string> = S extends `${infer F}${infer R}`
3  ? F
4  : never;
5type RestOfString<S extends string> = S extends `${infer F}${infer R}`
6  ? R
7  : never;
8
9type Split<S extends string> = S extends `${infer F}${infer R}`
10  ? [F, ...Split<R>]
11  : [];
12
13// 比较10以内数字的大小
14type GreaterThanDigit<
15  T extends string,
16  U extends string,
17  D extends string = '9876543210'
18> = D extends `${infer F}${infer R}` // 从大到小依次比较每一个数字
19  ? F extends U // 如果先匹配了U 则证明T≤U 返回false
20    ? false
21    : F extends T // 如果先匹配了T 则证明T>U 返回true
22      ? true
23      : GreaterThanDigit<T, U, R> // 再尝试匹配下一个数字
24  : false;
25
26type GreaterThanString<
27  T extends string,
28  U extends string,
29  LEN_T extends number = LengthOfString<`${T}`>, // T的长度
30  LEN_U extends number = LengthOfString<`${U}`>, // U的长度
31  FIRST_T extends string = FirstOfString<`${T}`>, // T的长度
32  FIRST_U extends string = FirstOfString<`${U}`> // U的长度
33> = LEN_U extends LEN_T // 判断长度是否相同
34  ? LEN_T extends 1 // 判断相同，长度是否为1
35    ? GreaterThanDigit<FIRST_T, FIRST_U> // 长度为1 直接比较首位
36    : FIRST_T extends FIRST_U // 长度相同，且长度不为1，依次比较每一位，先判断首位
37      ? GreaterThanString<RestOfString<`${T}`>, RestOfString<`${U}`>> // 首位相同 则比较下一位
38      : GreaterThanDigit<FIRST_T, FIRST_U> // 首位不同，则比较大小
39  : GreaterThan<LEN_T, LEN_U>; // 如果长度不相同，则长度大的数字更大
40
41type GreaterThan<T extends number, U extends number> = GreaterThanString<
42  `${T}`,
43  `${U}`
44>;
45