关于前端:精读MinusOne-PickByType-StartsWith

6次阅读

共计 6772 个字符，预计需要花费 17 分钟才能阅读完成。

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

用 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<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<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

思路是：

U 如果为空字符串则匹配所有场景，间接返回 true；否则 U 能够拆为以 US(U Start) 结尾、UE(U End) 的字符串进行后续断定。
接着下面的断定，如果 T 为空字符串则不可能被 U 匹配，间接返回 false；否则 T 能够拆为以 TS(T Start) 结尾、TE(T End) 的字符串进行后续断定。
接着下面的断定，如果 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<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<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<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<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<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 函数的妙用须要领悟一下。

探讨地址是：精读《MinusOne, PickByType, StartsWith…》· Issue #430 · dt-fe/weekly

如果你想参加探讨，请点击这里，每周都有新的主题，周末或周一公布。前端精读 – 帮你筛选靠谱的内容。

关注 前端精读微信公众号

版权申明：自在转载 - 非商用 - 非衍生 - 放弃署名（创意共享 3.0 许可证）

正文完

前端

发表至：前端

2022-07-11

0

关于前端:2020成绩单前端脚手架的开发思路与实现

关于前端:图片

关于前端:你信不信这5种情况瞬间能让程序员抓狂

关于前端:这样的-switch-开关样式真的太折腾了

关于java:SpringBoot快速整合通用Mapper

关于前端:精读MinusOne-PickByType-StartsWith

精读

MinusOne

PickByType

StartsWith

EndsWith

PartialByKeys

RequiredByKeys

Mutable

OmitByType

总结

站内搜索