你知道 - 前端｜面试进阶之道
MinusOne, PickByType, StartsWith...
2022-09-26TypeScript00
请注意，本文编写于 571 天前，最后修改于 571 天前，其中某些信息可能已经过时。

解决 TS 问题的最好办法就是多练，这次解读 type-challenges Medium 难度 33~40 题。

精读

MinusOne

用 TS 实现 MinusOne 将一个数字减一：

type Zero = MinusOne<1> // 0
type FiftyFour = MinusOne<55> // 54

TS 没有 “普通” 的运算能力，但涉及数字却有一条生路，即 TS 可通过 ['length'] 访问数组长度，几乎所有数字计算都是通过它推导出来的。

这道题，我们只要构造一个长度为泛型长度 -1 的数组，获取其 ['length'] 属性即可，但该方案有一个硬伤，无法计算负值，因为数组长度不可能小于 0：

// 本题答案
type MinusOne<T extends number, arr extends any[] = []> = [
  ...arr,
  ''
]['length'] extends T
  ? arr['length']
  : MinusOne<T, [...arr, '']>

该方案的原理不是原数字 -1，而是从 0 开始不断加 1，一直加到目标数字减一。但该方案没有通过 MinusOne<1101> 测试，因为递归 1000 次就是上限了。

还有一种能打破递归的思路，即：

type Count = ['1', '1', '1'] extends [...infer T, '1'] ? T['length'] : 0 // 2

也就是把减一转化为 extends [...infer T, '1']，这样数组 T 的长度刚好等于答案。那么难点就变成了如何根据传入的数字构造一个等长的数组？即问题变成了如何实现 CountTo<N> 生成一个长度为 N，每项均为 1 的数组，而且生成数组的递归效率也要高，否则还会遇到递归上限的问题。

网上有一个神仙解法，笔者自己想不到，但是可以拿出来给大家分析下：

type CountTo<
  T extends string,
  Count extends 1[] = []
> = T extends `${infer First}${infer Rest}`
  ? CountTo<Rest, N<Count>[keyof N & First]>
  : Count

type N<T extends 1[] = []> = {
  '0': [...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T]
  '1': [...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T, 1]
  '2': [...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T, 1, 1]
  '3': [...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T, 1, 1, 1]
  '4': [...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T, 1, 1, 1, 1]
  '5': [
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    1,
    1,
    1,
    1,
    1
  ]
  '6': [
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    1,
    1,
    1,
    1,
    1,
    1
  ]
  '7': [
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    1,
    1,
    1,
    1,
    1,
    1,
    1
  ]
  '8': [
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1
  ]
  '9': [
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    ...T,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1
  ]
}

也就是该方法可以高效的实现 CountTo<'1000'> 产生长度为 1000，每项为 1 的数组，更具体一点，只需要遍历 <T> 字符串长度次数，比如 1000 只要递归 4 次，而 10000 也只需要递归 5 次。

CountTo 函数体的逻辑是，如果字符串 T 非空，就拆为第一个字符 First 与剩余字符 Rest，然后拿剩余字符递归，但是把 First 一次性生成到了正确的长度。最核心的逻辑就是函数 N<T> 了，它做的其实是把 T 的数组长度放大 10 倍再追加上当前数量的 1 在数组末尾。

而 keyof N & First 也是神来之笔，此处本意就是访问 First 下标，但 TS 不知道它是一个安全可访问的下标，而 keyof N & First 最终值还是 First，也可以被 TS 安全识别为下标。

拿 CountTo<'123'> 举例：

第一次执行 First='1'、Rest='23'：

CountTo<'23', N<[]>['1']>
// 展开时，...[] 还是 []，所以最终结果为 ['1']

第二次执行 First='2'、Rest='3'

CountTo<'3', N<['1']>['2']>
// 展开时，...[] 有 10 个，所以 ['1'] 变成了 10 个 1，追加上 N 映射表里的 2 个 1，现在一共有 12 个 1

第三次执行 First='3'、Rest=''

CountTo<'', N<['1', ...共 12 个]>['3']>
// 展开时，...[] 有 10 个，所以 12 个 1 变成 120 个，加上映射表中 3，一共有 123 个 1

总结一下，就是将数字 T 变成字符串，从最左侧开始获取，每次都把已经积累的数组数量乘以 10 再追加上当前值数量的 1，实现递归次数极大降低。

PickByType

实现 PickByType<P, Q>，将对象 P 中类型为 Q 的 key 保留：

type OnlyBoolean = PickByType<
  {
    name: string
    count: number
    isReadonly: boolean
    isEnable: boolean
  },
  boolean
> // { isReadonly: boolean; isEnable: boolean; }

本题很简单，因为之前碰到 Remove Index Signature 题目时，我们用了 K in keyof P as xxx 来对 Key 位置进行进一步判断，所以只要 P[K] extends Q 就保留，否则返回 never 即可：

// 本题答案
type PickByType<P, Q> = {
  [K in keyof P as P[K] extends Q ? K : never]: P[K]
}

StartsWith

实现 StartsWith<T, U> 判断字符串 T 是否以 U 开头：

type a = StartsWith<'abc', 'ac'> // expected to be false
type b = StartsWith<'abc', 'ab'> // expected to be true
type c = StartsWith<'abc', 'abcd'> // expected to be false

本题也比较简单，用递归 + 首字符判等即可破解：

// 本题答案
type StartsWith<
  T extends string,
  U extends string
> = U extends `${infer US}${infer UE}`
  ? T extends `${infer TS}${infer TE}`
    ? TS extends US
      ? StartsWith<TE, UE>
      : false
    : false
  : true

思路是：

  1. U 如果为空字符串则匹配一切场景，直接返回 true；否则 U 可以拆为以 US(U Start) 开头、UE(U End) 的字符串进行后续判定。
  2. 接着上面的判定，如果 T 为空字符串则不可能被 U 匹配，直接返回 false；否则 T 可以拆为以 TS(T Start) 开头、TE(T End) 的字符串进行后续判定。
  3. 接着上面的判定，如果 TS extends US 说明此次首字符匹配了，则递归匹配剩余字符 StartsWith<TE, UE>，如果首字符不匹配提前返回 false。

笔者看了一些答案后发现还有一种降维打击方案：

// 本题答案
type StartsWith<T extends string, U extends string> = T extends `${U}${string}`
  ? true
  : false

没想到还可以用 ${string} 匹配任意字符串进行 extends 判定，有点正则的意思了。当然 ${string} 也可以被 ${infer X} 代替，只是拿到的 X 不需要再用到了：

// 本题答案
type StartsWith<T extends string, U extends string> = T extends `${U}${infer X}`
  ? true
  : false

笔者还试了下面的答案在后缀 Diff 部分为 string like number 时也正确：

// 本题答案
type StartsWith<T extends string, U extends string> = T extends `${U}${number}`
  ? true
  : false

说明字符串模板最通用的指代是 ${infer X} 或 ${string}，如果要匹配特定的数字类字符串也可以混用 ${number}。

EndsWith

实现 EndsWith<T, U> 判断字符串 T 是否以 U 结尾：

type a = EndsWith<'abc', 'bc'> // expected to be true
type b = EndsWith<'abc', 'abc'> // expected to be true
type c = EndsWith<'abc', 'd'> // expected to be false

有了上题的经验，这道题不要太简单：

// 本题答案
type EndsWith<T extends string, U extends string> = T extends `${string}${U}`
  ? true
  : false

这可以看出 TS 的技巧掌握了就非常简单，但不知道就几乎无解，或者用很笨的递归来解决。

PartialByKeys

实现 PartialByKeys<T, K>，使 K 匹配的 Key 变成可选的定义，如果不传 K 效果与 Partial<T> 一样：

interface User {
  name: string
  age: number
  address: string
}

type UserPartialName = PartialByKeys<User, 'name'> // { name?:string; age:number; address:string }

看到题目要求是不传参数时和 Partial<T> 行为一直，就应该能想到应该这么起头写个默认值：

type PartialByKeys<T, K = keyof T> = {}

我们得用可选与不可选分别描述两个对象拼起来，因为 TS 不支持同一个对象下用两个 keyof 描述，所以只能写成两个对象：

type PartialByKeys<T, K = keyof T> = {
  [Q in keyof T as Q extends K ? Q : never]?: T[Q]
} & {
  [Q in keyof T as Q extends K ? never : Q]: T[Q]
}

但不匹配测试用例，原因是最终类型正确，但因为分成了两个对象合并无法匹配成一个对象，所以需要用一点点 Magic 行为合并：

// 本题答案
type PartialByKeys<T, K = keyof T> = {
  [Q in keyof T as Q extends K ? Q : never]?: T[Q]
} & {
  [Q in keyof T as Q extends K ? never : Q]: T[Q]
} extends infer R
  ? {
      [Q in keyof R]: R[Q]
    }
  : never

将一个对象 extends infer R 再重新展开一遍看似无意义，但确实让类型上合并成了一个对象，很有意思。我们也可以将其抽成一个函数 Merge<T> 来使用。

本题还有一个函数组合的答案：

// 本题答案
type Merge<T> = {
  [K in keyof T]: T[K]
}
type PartialByKeys<T, K extends PropertyKey = keyof T> = Merge<
  Partial<T> & Omit<T, K>
>
  • 利用 Partial & Omit 来合并对象。
  • 因为 Omit<T, K> 中 K 有来自于 keyof T 的限制，而测试用例又包含 unknown 这种不存在的 Key 值，此时可以用 extends PropertyKey 处理此场景。

RequiredByKeys

实现 RequiredByKeys<T, K>，使 K 匹配的 Key 变成必选的定义，如果不传 K 效果与 Required<T> 一样：

interface User {
  name?: string
  age?: number
  address?: string
}

type UserRequiredName = RequiredByKeys<User, 'name'> // { name: string; age?: number; address?: string }

和上题正好相反，答案也呼之欲出了：

type Merge<T> = {
  [K in keyof T]: T[K]
}
type RequiredByKeys<T, K extends PropertyKey = keyof T> = Merge<
  Required<T> & Omit<T, K>
>

等等，一个测试用例都没过，为啥呢？仔细想想发现确实暗藏玄机：

Merge<{
  a: number
} & {
  a?: number
}> // 结果是 { a: number }

也就是同一个 Key 可选与必选同时存在时，合并结果是必选。上一题因为将必选 Omit 掉了，所以可选不会被必选覆盖，但本题 Merge<Required<T> & Omit<T, K>>，前面的 Required<T> 必选优先级最高，后面的 Omit<T, K> 虽然本身逻辑没错，但无法把必选覆盖为可选，因此测试用例都挂了。

解法就是破解这一特征，用原始对象 & 仅包含 K 的必选对象，使必选覆盖前面的可选 Key。后者可以 Pick 出来：

type Merge<T> = {
  [K in keyof T]: T[K]
}
type RequiredByKeys<T, K extends PropertyKey = keyof T> = Merge<
  T & Required<Pick<T, K>>
>

这样就剩一个单测没通过了：

Expect<Equal<RequiredByKeys<User, 'name' | 'unknown'>, UserRequiredName>>

我们还要兼容 Pick 访问不存在的 Key，用 extends 躲避一下即可：

// 本题答案
type Merge<T> = {
  [K in keyof T]: T[K]
}
type RequiredByKeys<T, K extends PropertyKey = keyof T> = Merge<
  T & Required<Pick<T, K extends keyof T ? K : never>>
>

Mutable

实现 Mutable<T>，将对象 T 的所有 Key 变得可写：

interface Todo {
  readonly title: string
  readonly description: string
  readonly completed: boolean
}

type MutableTodo = Mutable<Todo> // { title: string; description: string; completed: boolean; }

把对象从可写变成不可写：

type Readonly<T> = {
  readonly [K in keyof T]: T[K]
}

从不可写改成可写也简单，主要看你是否记住了这个语法：-readonly：

// 本题答案
type Mutable<T extends object> = {
  -readonly [K in keyof T]: T[K]
}

OmitByType

实现 OmitByType<T, U> 根据类型 U 排除 T 中的 Key：

type OmitBoolean = OmitByType<
  {
    name: string
    count: number
    isReadonly: boolean
    isEnable: boolean
  },
  boolean
> // { name: string; count: number }

本题和 PickByType 正好反过来，只要把 extends 后内容对调一下即可：

// 本题答案
type OmitByType<T, U> = {
  [K in keyof T as T[K] extends U ? never : K]: T[K]
}

总结

本周的题目除了 MinusOne 那道神仙解法比较难以外，其他的都比较常见，其中 Merge 函数的妙用需要领悟一下。

本文作者:前端小毛

本文链接:

版权声明:本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！