TS 类型体操还能这么玩,太秀了!

13,596 阅读7分钟

最近在看 TypeScript 相关的内容,做了一下类型体操,真的太秀啦

递归、infer 满天飞,今天就来领略一下 TS 能做什么骚操作吧!

先放上本文的几个小标题,很骚

  • 巧用数组上数学课
  • 模版字符串为所欲为
  • 中序遍历 TS 也能行
  • infer + 递归随意秒杀

下面开始军训体操

一、巧用数组上数学课

这一题是 TS 类型挑战中的 Greater Than

这道题需要我们实现 GreaterThan<T, U> 判断 T > Utrue 还是 false

有几个特殊测试用例

GreaterThan<2, 1> //should be true
GreaterThan<1, 1> //should be false
GreaterThan<10, 100> //should be false
GreaterThan<111, 11> //should be true

看到这题,在 JS 中非常的简单,直接就能有答案,但是 TS 是没有计算能力的,也不支持大小判断

那么我们还能怎么做呢?巧用数组,通过数组的 length 来进行比较

有两种可行的方法

  • 第一种就是递归,但是通过实践我们会知道,当参数过大时,很容易爆栈
  • 第二种方法就是构造两个长度为 TU 的数组,通过数组判断哪个数组更长

这里我们先看第一种方法

递归法

可以采用递归来实现,前面我们也有说过了,数组的很容易爆掉,但是测试用例还算温柔,这题能过

  • 思路是拿一个新数组,和 T,U 进行对比,哪个先追上新数组的长度,哪个就小
  • 简单一点来说就是,两个不一样长的木棍放在一起,我们从一端开始不断往前走,先摸到的那个木棍就是短一点的

看到具体实现上

通过引入新的变量 R extends any[] = [] ,来进行辅助的计算,接着依次判断 TUR['length] 是否相等,这时候,如果 TR['length] 相等了而 U 还没有相等,那就说明了 T < U ,如果都不相等,那就继续加大数组 R 的长度

怎么加大数组 R 呢?

递归的时候,往数组中多加一个值即可,GreaterThan<T, U, [...R, 1]> 这里的 1 就是塞进去把 length 整大的

这样就完成了这道大小判断

// 答案
type GreaterThan<T extends number, U extends number, R extends any[] = []> = 
  T extends R['length']
    ? false
    : U extends R['length']
      ? true
      : GreaterThan<T, U, [...R, 1]>

构造数组

我们还有一种很巧妙的方法

先看几段小代码

[1, 1, 1, 1] extends [1, 1] ? true : false // false
[1, 1] extends [1, 1, 1] ? true : false // false

上面的例子中,两个数组长度不等,很显然都会返回 false

那么我们抽象一下,这同样会返回 false,因为很显然多了 ...any

// 伪代码
A extends [...A, ...any] ? true : false

那么我们就可以有这样的思路,例如比较 2 和 3

我们就可以比较数组 A[1, 1] 和数组B [1, 1, 1]

我们就可以这么来看,数组 B 可以表示为 [...A, 1] 所以 B 大于 A,A 没有办法这样表示 B 所以更小

显然我们这个思路没啥问题!

如何实现呢?关键在于怎么构造长度为 T 和 U 的数组

写一个生成长度为 N 的数组的方法,需要接受长度 T,还需要使用辅助变量 A 来保存当前的数组并作为返回值

采用递归的方式往数组中添加新的元素,这样数组的 ['length'] 就会不断的变长,当等于 T 时,就结束循环,返回数组 A

type newArr<T extends number, A extends any[] = []> = 
  A['length'] extends T
    ? A
    : newArr<T, [...A, '']>

验证一下,没啥毛病

type A = newArr<4> // type A = ["", "", "", ""]

image.png

接下来就好办了,我们比较这两个数组就好了,为了美观抽出一个 type 来,这个就是我们前面讲到的逻辑

type GreaterArr<T extends any[], U extends any[]> = U extends [...T, ...any] ? false : true

最后调用它进行比较,KO

type GreaterThan<T extends number, U extends number> = GreaterArr<newArr<T>, newArr<U>>

二、模版字符串为所欲为

这一节,来看看模版字符串在 TS 里有多骚

这一题是 3326 · BEM style string,我们需要实现 BEM 函数完成其规则拼接,不理他,直接看用例

type ClassNames1 = BEM<'btn', ['price']> // 'btn__price'
type ClassNames2 = BEM<'btn', ['price'], ['warning', 'success']> // 'btn__price--warning' | 'btn__price--success'
type ClassNames3 = BEM<'btn', [], ['small', 'medium', 'large']> // 'btn--small' | 'btn--medium' | 'btn--large'

不过就是根据参数的位置,用不同的符号进行连接,例如BEN<'aaa', ['b'], ['c']>

b 是第二个参数,那么就用 __ 来连接,c 是第三个参数就用 -- 来连接

这题怎么做呢,我们只需要根据不同的参数利用模版字符串定义不同的模版即可

但是你会发现我们传参是数组形式的,我们要的是一个个的,那就需要通过下标来将数组或者对象转成联合类型

// 数组转联合
T[number]
// 对象转联合
Object[keyof T]

特殊的,当字符串中通过这种方式申明时,会自动生成新的联合类型,例如这题下面的写法,

type BEM<B extends string, E extends string[], M extends string[]> = `${B}__${E[number]}--${M[number]}`

会得到 type A = "btn__price--warning" | "btn__price--success" 这样的结果

但是这并没有考虑到空数组的情况,因此需要做提前的判断,

type IsNever<T> = [T] extends [never] ? true : false
type IsUnion<U> = IsNever<U> extends true ? "" : U
type BEM<B extends string, E extends string[], M extends string[]> = `${B}${IsUnion<`__${E[number]}`>}${IsUnion<`--${M[number]}`>}`

模版字符串想拼啥就拼啥,酷!

三、中序遍历 TS 也能行

JS 实现中序遍历,你闭着眼睛就能写,那 TS 呢

这是我们的测试用例,我们需要实现 InorderTraversal 方法,来实现中序遍历

const tree1 = {
  val: 1,
  left: null,
  right: {
    val: 2,
    left: {
      val: 3,
      left: null,
      right: null,
    },
    right: null,
  },
} as const

type A = InorderTraversal<typeof tree1> // [1, 3, 2]

这题看上去很难,TS 怎么还能遍历树呢,其实是可以的,非常简单,和 JS 的思路是一致的,我们先看看 JS 是如何实现中序遍历的呢?

const inorderTraversal = (root) => {
  if(!root) return []
  const res = []
  while(root) {
    inorderTraversal(root.left)
    res.push(val)
    inorderTraversal(tree.right)
  }
  return res
}

JS 是在 root 为 null 时结束。对于 TS 来说,实现递归,需要 extends TreeNode 而不是 null 来结束

不能使用 null 来判断,是因为 TS 不能判断类型 T 是否符合 TreeNode 类型

在结束前,我们需要递归的调用这个方法,左中右的顺序

// 答案
interface TreeNode {
  val: number
  left: TreeNode | null
  right: TreeNode | null
}
type InorderTraversal<T extends TreeNode | null> = 
  [T] extends [TreeNode] 
    ? (
      [
        ...InorderTraversal<T['left']>,
        T['val'],
        ...InorderTraversal<T['right']>
      ]
    )
    : []

四、infer + 递归随意秒杀

infer 可谓是 TS 中的大杀器,大多数题目都会涉及到它的使用,他可以很方便的帮我们推断出一个变量的类型,我们看看这道题

实现一个像 Lodash.without 函数一样的泛型 Without<T, U>,它接收数组类型的 T 和数字或数组类型的 U 为参数,会返回一个去除 U 中元素的数组 T。

type Res = Without<[1, 2], 1> // expected to be [2]
type Res1 = Without<[1, 2, 4, 1, 5], [1, 2]> // expected to be [4, 5]
type Res2 = Without<[2, 3, 2, 3, 2, 3, 2, 3], [2, 3]> // expected to be []

不用看题目啦,直接看用例,无非就是把第二个参数中的值,从数组中去掉

这题我们非常容易想,通过 infer 和 递归来实现,用 infer 取出数组的第一项

  • 如果能够被 U 包含,那就丢弃,也就是把剩余的递归,不保留这一项
  • 如果不包含,那就用 [R, ...] 把它给留下,剩下的继续递归 因此很有可能写下这样的代码
type Without<T, U> = 
  T extends [infer R, ...infer F]
    ? R extends U
      ? Without<F, U>
      : [R, ...Without<F, U>]
    : T

但是发现只过了一个用例,问题在于 U 有可能是数组,也有可能是字符串,而单纯采用 extends 来判断只能处理字符串的情况

因此我们需要解决如何判断字符串和数组两种情况

可以采用数组转 Union 的方法来解决

type ToUnion<T> = T extends any[] ? T[number] : T
type B = ToUnion<['1','b']> // type B = "1" | "b"

这样无论是数字还是数组,都会转成联合类型,而联合类型很方便判断 extends 包含关系:

// 答案
type ToUnion<T> = T extends any[] ? T[number] : T
type Without<T, U> = 
  T extends [infer R, ...infer F]
    ? R extends ToUnion<U>
      ? Without<F, U>
      : [R, ...Without<F, U>]
    : T

总结

这篇文章通过几道例题,带大家领略了 TS 的风采,也看到了 TS 的弊端:计算能力,在使用 TS 过程中,我们要

  • 巧用辅助变量
  • 遇到计算时大胆使用 ['length']
  • 诡异字符串操作多用模版字符串
  • infer + 递归大杀器

好了本文的内容就这么多了,更多关于 TS 的内容,以后再说,随缘更新!

有帮助的话留言点赞哦!